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本 书 作者 在 9 年 前 开始 接触 互联 网 ， 体 验 到 网 络 给 人 们 带 来 的 便捷 。 又 经 过 1 年 ， 开 始 使 
F HTML 制作 Web 页 面 ， 那 时 还 是 表格 布局 一 统 天 下 ， 使 用 CSS 进行 布局 的 人 少 之 又 少 。 作 
者 当然 也 使 用 表格 布局 页 面 。 这 样 做 的 结果 是 ， 页 面 充斥 着 大 量 的 table 标记 和 很 多 控制 样式 
的 HTML 属性 和 元 素 ， 增 加 了 维护 工作 的 难度 。 后 来 ， 随 着 Web 标准 的 逐步 推广 ， 要 求 页 面 
内 容 与 其 表现 形式 分 离 ， 而 CSS 就 是 控制 页 面 表现 的 语言 。 于 是 ， 作 者 开始 仔细 研究 CSS. 
很 快 就 领略 了 它 的 强大 功能 ， 后 来 便 一 直 使 用 CSS 进行 Web 开发 。 

CSS 入 门 非常 容易 , 它 本 身 并 不 涉及 过 于 复杂 的 语法 , 其 代码 具有 很 好 的 自我 说 明 的 特性 ， 
即使 从 未 接触 过 CSS 的 人 也 能 理解 大 部 分 代码 的 含义 。 

希望 通过 本 书 将 作者 所 掌握 的 CSS. 知识 和 多 年 开发 中 积累 的 经 验 与 读者 分 享 ， 帮 助 读者 
学 习 、 理 解 和 运用 好 CSS。 

1. 如 何 阅 读本 书 

本 书 采用 循序 渐进 的 编写 方式 ,初学 者 可 按 顺 序 阅读 每 一 章 的 内 容 。 每 章 的 开始 部 分 会 告 
诉 你 本 章 所 涉及 的 主要 内 容 ， 便 于 快速 查阅 和 了 解 章节 内 容 。 如 果 读 者 对 某 些 内 容 已 经 掌握 ， 
则 可 以 跳 过 这 一 章 继 续 阅 读 。 中 级 读者 可 以 根据 需要 ， 挑 选 某 些 章节 进行 阅读 。 

本 书 内 容 严格 依照 CSS 规范 编写 ， 但 并 不 是 对 规范 的 生 搬 硬 套 。 书 中 将 一 些 腹 涩 难 懂 的 
专业 术语 转化 为 通俗 易 懂 的 语言 进行 讲解 ,同时 配合 适当 的 插图 和 丰富 的 代码 示例 供 读者 学 习 
和 参考 。 希 望 读 者 在 阅读 过 程 中 能 够 亲自 试验 ， 以 加 深 理解 。 为 了 让 读者 能 了 解 国外 相关 领域 
的 发 展 状况 ， 进 一 步 地 深入 学 习 ， 书 中 还 提供 了 一 些 英 文 资料 的 参考 网 址 。 

2. 本 书 针对 的 读者 

本 书 主要 面向 初 、 中 级 读者 , 也 适合 广大 Web 设计 人 员 和 爱好 者 阅读 。 对 于 刚刚 步 入 Web 
设计 领域 的 读者 ， 本 书 将 从 最 基本 的 概念 开始 ， 逐 步 介 绍 使 用 CSS 进行 Web 开发 的 方法 。 如 
果 读 者 对 CSS 已 有 一 定 的 了 解 ， 本 书 也 将 介绍 一 些 CSS 开发 的 高 级 技巧 ， 并 提供 进一步 学 习 
和 研究 的 参考 资料 。 对 于 从 事 Web 开发 工作 的 读者 ， 本 书 可 作为 一 本 CSS 参考 手册 。 
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第 一 篇 A CSS 
第 1 章 ”Web 设计 基础 


本 章 首先 介绍 什么 是 因特网 和 万 维 网 ， 它 们 之 间 的 区 别 和 联系 是 什么 。 接 着 会 介绍 一 些 与 
Web 设计 相关 的 基本 知识 ， 包 括 Web 设计 所 使 用 的 各 种 技术 、 什 么 是 Web 标准 以 及 它 的 优势 
所 在 。 浏 览 器 是 用 户 访问 Web 应 用 的 途径 ， 本 章 将 介绍 几 款 目前 较为 流行 的 浏览 器 ， 它 们 各 
自 的 发 展 历程 和 功能 特点 。 最 后 让 读者 了 解 两 种 较 新 的 Web 开发 技术 。 

本 章 主要 内 容 
什么 是 因特网 和 万 维 网 ， 二 者 是 什么 关系 
Web 设计 技术 概述 
什么 是 Web 标准 
Web 标准 涵盖 哪些 内 容 
目前 比较 流行 的 浏览 器 
Microsoft Silverlight 和 Adobe Flex 技术 


1.1. 因特网 和 万 维 网 


1.11 何 为 因特网 


各 位 读者 可 能 对 因特网 (Internet) 这 个 词 不 会 感到 陌生 。 因 特 网 是 由 许 许 多 多 计算 机 连接 在 
-起 构成 的 一 个 计算 机 网 络 。 在 这 个 网 络 中 ， 人 们 可 以 使 用 各 自 的 计算 机 互相 传递 信息 ; 可 以 
在 自己 的 计算 机 上 存储 文件 供 别人 访问 :可 以 利用 多 台 计 算 机 实现 分 布 式 应 用 。Internet 规模 
庞大 ， 遍 及 全 球 。 一 旦 上 网 ， 你 就 与 全 球 无 以 计数 的 计算 机 连 成 了 一 体 。 


1.1.2. 何 为 万 维 网 


有 上 网 经 历 的 读者 会 注意 到 ， 在 浏览 器 的 地 址 栏 中 经 常 出 现 “www”， 比 如 要 访问 百度 网 
站 就 需 输入 “www.baidu.com”。 其 中 的 三 个 “w” 是 英文 World Wide Web 的 缩写 ， 中 文 译 为 
万 维 网 。 万 维 网 是 无 数 个 网 络 站 点 和 网 页 的 集合 ， 它 们 在 一 起 构成 了 因特网 最 主要 的 部 分 ( 因 
特 网 还 包括 电子 邮件 、Usenet 以 及 新 闻 组 等 应 用 )。 

万 维 网 实际 上 是 多 媒体 的 集合 ， 各 个 部 分 由 超级 链接 连接 而 成 。 我 们 通常 使 用 浏览 器 上 网 
观看 的 内 容 ， 就 是 万 维 网 的 内 容 。 比 如 在 浏览 器 中 输入 “www.sina.com.cn”， 就 可 以 访问 新 浪 
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网 站 的 首页 ( 见 图 1-1)。 网 页 也 称 作 Web 页 面 或 Web 文档 ， 它 包含 了 文字 、 图 像 、 动 画 和 一 些 
具有 交互 功能 的 控件 。 
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1-1 使 用 浏览 器 访问 新 浪 网 站 的 首页 


1.2 Web 设计 技术 
Web 设计 涵盖 的 范围 相当 广 , 本 节 只 介绍 一 些 构建 Web 文档 所 需 的 儿 项 最 为 基本 的 技术 。 
1.2.1 HTML 


HTML, 英文 全 称 为 HyperText Markup Language， 中 文 译 为 超 文本 标记 语言 。 它 是 用 来 创 
建 Web 文档 的 语言 。 页 面 元 素 是 由 特定 的 标记 来 确定 的 ， 这 些 标 记 告诉 浏览 器 该 如 何 显示 这 
个 页 面 。 所 谓 超 文 本 ， 就 是 一 种 含有 指向 其 他 文档 链接 的 文本 ， 即 我 们 俗称 的 链接 。 超 文本 把 
存放 于 不 同 计算 机 中 的 文档 链接 在 一 起 。 访 问 者 不 必 关 心 链接 所 指 的 内 容 到 底 位 于 何 处 ， 只 需 
要 在 链接 上 单 击 一 下 鼠标 ， 页 面 就 会 马上 转 到 所 指 的 文档 中 去 。 


1.2.2 XML 


XML， 即 eXtensible Markup Language( 可 扩展 标记 语言 )。XML 是 一 种 定义 其 他 语言 的 语 
言 ， 是 一 种 元 语言 (Meta Language)。 使 用 XML 可 以 创建 自己 定制 的 标记 语言 ， 然 后 使 用 这 种 
语言 对 自己 的 文档 进行 格式 化 。 

XML 5 HTML 相 比 ， 对 语法 的 要 求 更 加 严格 ， 也 比 HTML 灵活 。 于 是 XML 和 HTML 相 


结合 产生 了 XHIML. 


1.2.3 XHTML 


XHTML 'Pff) X fl XML 中 的 和 含义 一 致 , 它 是 可 扩展 超 文 本 标记 语言 .XHTML 是 由 XML 
创建 出 来 的 ， 是 对 HTML 的 重新 改造 。XHTML 更 健壮 、 更 灵活 、 更 强大 ， 将 来 可 能 得 到 更 加 
完善 的 支持 。 


1.2.4 CSS 


HTML 可 以 将 内 容 、 结 构 和 格式 化 信息 都 包含 在 同一 个 Web 文档 中 ， 这 样 做 虽然 简单 易 
行 ， 但 也 存在 很 多 问题 。 各 种 信息 存放 在 一 起 不 利于 文档 的 维护 ， 修 改 起 来 费时 费力 。 因 此 
HTML 应 只 负责 文档 的 内 容 和 结构 ， 而 格式 化 信息 交 给 一 套 新 的 语言 来 完成 ， 这 就 是 CSS, 它 
也 是 本 书 的 主角 。 

CSS 全 称 为 Cascading Style Sheet， 中 文 译 为 层 登 样式 表 ( 也 有 译作 级 联 样式 表 的 )。 其 作用 
就 是 要 控制 HTML 的 页 面 布 局 和 外 观 样式 ， 使 Web 文档 内 容 结构 和 表现 形式 完全 分 离 。 


1.2.5 DOM 与 ECMAScript 


DOM(Document Object Model, 文档 对 象 模型 ) 是 HTML 和 XML 文档 的 一 个 应 用 程序 接口 
(Application Programming Interface，APD。 它 提供 了 一 种 结构 化 的 文档 表示 方式 ， 从 而 使 开发 
人 员 可 以 修改 它 的 内 容 以 及 最 终 的 表达 方式 。 总 而 言 之 ， 它 把 网 页 内 容 与 脚本 或 编程 语言 联系 
在 一 起 。 

ECMAScript 是 由 欧洲 计算 机 制造 商 协会 (European Computer Manufacturers Association, 
ECMA) 通 过 ECMA-262 予以 标准 化 的 脚本 程序 设计 语言 。 通 过 DOM 可 对 页 面 中 的 对 象 进行 
访问 和 操作 。 目 前 Web 页 面 中 经 常 使 用 的 JavaScript 和 JScript 与 ECMAScript 兼容 , 但 也 包含 
超出 ECMAScript 的 功能 。 


1.3 Web 标准 概述 


1.3.1 什么 是 Web 标准 


Web 标准 是 由 W3C(World Wide Web Consortium) 和 其 他 标准 化 组 织 指定 的 一 系列 规范 的 
集合 ， 其 中 包含 了 上 文 提 到 的 COHTML、XML 和 CSS. Web 标准 的 目的 在 于 创建 一 个 统一 的 
用 于 Web 表现 层 的 技术 标准 ， 以 便 通 过 不 同 浏览 器 或 终端 设备 向 最 终 用 户 展示 信息 内 容 。 
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1.3.2 ”使 用 语义 化 的 (X)HTML 


首先 我 们 应 该 了 解 (X)HTML 的 用 途 是 什么 , 根据 W3C 的 解释 , “HTML 是 一 种 在 万 维 
上 发 布 超 文本 的 通用 语言 ……HTML 使 用 诸如 <h1> 和 </h1> 一 类 的 标记 来 将 文本 结构 化 为 标 
题 、 段 落 、 列 表 、 超 文本 等 。” 

所 谓语 义 化 ， 就 是 指 COHTML 可 以 给 普通 的 文本 增加 结构 和 含义 。 比 如 某 段 文本 是 一 个 普 
通 段 落 ， 另 一 段 文 本 是 一 个 标题 或 是 列表 中 的 一 项 等 。 在 第 2 章 ， 我 们 还 要 详细 介绍 如 何 使 有 
语义 化 标记 。 


1.3.3 Web 文档 的 三 层 结构 


1. 结构 、 表 现 和 行为 


Web 文档 通常 包含 三 个 不 同 的 层次 ( 见 图 1-2)。 首 先是 结构 层 ， 该 层 内 容 是 由 (X)HTML 编 
写 的 文本 文档 。 它 包含 文档 的 内 容 ， 以 及 由 CX)HTML 添加 的 语义 化 的 标记 。 第 二 层 为 表现 层 ， 
这 是 本 书 的 重点 。 该 层 内 容 是 CSS 样式 代码 。 它 描述 了 文档 该 以 何 种 样式 呈现 在 访问 者 面前 ， 
样式 包括 页 面 各 部 分 的 布局 、 文 字段 落 排版 、 背 景 图 像 和 颜色 等 。 第 三 层 是 行为 层 ， 这 里 不 对 
它 进行 过 多 的 介绍 。 该 层 定义 了 文档 模型 以 及 如 何 与 用 户 进行 交互 ， 所 涉及 技术 主要 是 DOM 
以 及 ECMAScript 脚本 语言 。 
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12 结构、 表现 和 行为 及 各 部 分 所 涉及 的 技术 


2. 模型 、 视 图 和 控制 器 


模型 、 视 图 和 控制 器 (Model-View-Controller，MVC) 模 式 是 面向 对 象 开发 中 常用 的 一 种 设 
计 结 构 , Web 文档 的 三 层 结构 也 可 看 作 是 一 种 MVC 结构 。 模 型 表示 数据 结构 , 也 就 是 (X)HTML 
所 编写 的 文档 内 容 。 视 图 表示 模型 的 展现 形式 ， 即 用 CSS 控制 页 面 的 样式 。 控 制 器 对 应 着 程 
序 的 动作 行为 ， 因 此 Web 中 的 交互 结构 可 视 为 控制 器 。 


1.3.4. Web 标准 的 优势 


1. 易于 开发 和 维护 


-个 大 型 的 网 站 往往 需要 很 多 人 员 的 参与 ， 他 们 的 分 工 也 不 同 ， 有 负责 页 面 样式 设计 的 ， 
有 负责 页 面 编码 的 ， 有 负责 样式 编写 的 等 。 由 于 内 容 结构 和 表现 的 分 离 ， 不 同 开发 人 员 可 以 独 


立 工作 ， 专 注 于 自己 负责 的 内 容 。 
样式 信息 和 内 容 是 相互 独立 的 ， 因 此 同一 个 样式 信息 可 用 于 不 同 的 内 容 中 ， 从 而 实现 代码 
重用 。 这 种 做 法 可 以 减少 重复 编码 ， 加 快 开发 进度 。 
样式 信息 重用 也 使 得 维护 工作 大 大 减轻 ， 只 需要 修改 一 小 部 分 样式 代码 ， 就 可 以 使 所 有 用 
到 该 样式 的 区 域 同时 改变 外 观 。 
2. 高 兼容 性 
由 于 W3C 对 Web 标准 的 推动 ， 越 来 越 多 的 浏览 器 支持 由 W3C 制定 的 各 种 标准 ， 从 而 使 
得 根据 标准 编写 的 Web 页 面 在 不 同 的 浏览 器 中 均 能 获得 一 致 的 效果 。 
3. 高 灵活 性 
现在 , 越 来 越 多 的 人 使 用 手机 或 PDA 访问 网 站 , 通常 这 些 设 备 的 屏幕 要 远 远 小 于 PC 机 的 
显示 器 。 网 页 的 内 容 和 表现 的 分 离 使 得 我 们 可 以 针对 不 同 平台 和 设备 应 用 不 同 的 样式 文件 ， 而 
网 页 内 容 无 须 改动 。 对 于 需要 打印 输出 的 页 面 , 我 们 也 无 须 再 提供 另 一 份 “适合 打印 ”的 页 面 ， 
取而代之 的 只 是 新 的 CSS 样式 。 
4. 提高 访问 速度 
内 容 与 表现 的 分 离 ， 使 得 页 面 中 不 再 包含 匈 余 的 样式 代码 ， 而 独立 出 来 的 样式 表 可 以 充分 
地 进行 重用 , 网 页 整体 代码 量 大 大 减少 。 这样 不 仅 能 占用 更 少 的 网 络 带宽 , 提高 页 面 载 入 速度 ， 
同时 浏览 器 也 能 对 页 面 进行 快速 解析 ， 显 示 给 用 户 。 
5. 提高 用 户 体验 
从 Web 应 用 的 角度 看 ， 用 户 体验 (User Experience，UE) 指 的 是 Web 应 用 程序 能 够 提供 直 
观 简洁 的 用 户 界 面 、 简 便 的 操作 以 及 有 效 的 交互 方式 .只 有 当 用 户 亲 自 使 用 时 才能 体验 到 它们 。 
用 户 体验 包含 了 多 方面 的 内 容 ， 其 中 一 致 性 、 可 用 性 等 方面 均 可 通过 标准 化 开发 来 实现 。 比 如 
各 个 页 面 使 用 统一 的 CSS 样式 ， 利 用 行为 层 技术 改善 交互 设计 等 。 
Q 延伸 ， 传 捷 (网 络 名 为 阿 捷 ) 是 国内 较 早 的 Web 标准 化 执行 者 , 他 参与 翻译 的 《网 站 重 构 》 
一 书 将 Web 标准 化 思想 引入 到 国内 的 网 页 设计 行业 。 在 他 的 网 站 上 有 一 篇 讲述 
Web 标准 的 文章 ， 读 者 可 以 访问 如 下 地 址 来 阅读 : 
http://www.w3cn.org/article/tips/2007/123.html 


1.4 浏览 器 的 故事 


网 页 和 浏览 器 是 分 不 开 的 ， 用 户 正 是 通过 浏览 器 来 达到 访问 网 页 的 目的 。 浏 览 器 (Browser) 
是 一 种 软件 程序 ， 可 以 和 网 络 建立 连接 并 与 之 通信 。 它 可 以 将 存在 于 万 维 网 中 的 特定 网 页 获取 
下 来 ， 对 网 页 中 的 内 容 进行 分 析 ， 并 按照 一 定 的 规则 显示 出 来 。 

目前 主流 浏览 器 有 Internet Explorer、Firefox、Opera、Safari 等 ， 它 们 适用 于 各 种 不 同 的 平 
台 环 境 。 其 中 最 为 流行 和 普及 的 是 Internet Explorer， 它 的 市 场 占有 率 接近 于 90%。 
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1.4.1 Netscape Navigator 


1994 年 ,网 景 通信 公司 (Netscape Communications Corporation) 推 出 了 Netscape Navigator( 以 

下 简称 NN) 浏 览 器 。 作 为 全 球 第 一 款 商 业 浏览 器 ，NN 大 规模 地 引领 人 们 开始 在 网 络 世界 中 漫 

游 ， 正 好 印证 了 Navigator( 领 航 员 ) 这 个 名 字 。 此 后 ，NN 浏览 器 迅速 走红 ， 一 度 曾经 占据 了 超 
过 90% 的 浏览 器 市 场 份额 。 如 图 1-3 所 示 为 以 Netscape Navigator 9 浏览 器 浏览 网 页 。 

au gas 


| i man :: netscape navigator w... © 


DJ Netscape 


Mavigator 9 is now available » Downoad todoy: Q Suport Addons C 
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The All-New Screenshot Gallery 
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Some of Navigator 9's Features. 
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* Run Navigator 9 on Windows. Mac OS X, or Linuxt 
Netscape extensions tor Firefox® [E 
回 URL correction naapa E 
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Link Pad 


Done. 


Hl 1-3 Netscape Navigator 9 浏览 器 (注意 页 面 中 提 到 停止 提供 任何 技术 支持 的 声明 ) 


NN 浏览 器 的 出 现 推动 了 网 络 的 普及 ， 网 络 的 普及 也 使 浏览 器 市 场 得 到 扩大 。 随 着 微软 公 
司 将 自己 的 Internet Explorer 浏览 器 与 Windows 操作 系统 实行 捆绑 销售 ， 网 景 通信 公司 不 得 不 
开始 面 对 挑战 。 从 那 时 起 ，NN 浏览 器 便 开始 走向 没落 。 

1998 年 11 月 网 景 通信 公司 被 美国 在 线 收购 ， 而 美国 在 线 之 后 又 成 为 时 代 华 纳 的 一 部 分 。 
2003 4: 7 H 15 日 时 代 华纳 解散 了 网 景 通信 公司 。2007 年 12 月 28 日 ， 据 网 景 官方 博客 消息 ， 
NN 浏览 器 将 在 2008 年 2 月 1 日 停止 更 新 并 且 不 再 提供 任何 技术 支持 ,1994 年 问世 的 Netscape 
Navigator 正式 退出 历史 舞台 。 


1.4.2 Microsoft Internet Explorer 


1995 年 ， 微 软 公司 (Microsoft Corporation) 推 出 了 自己 的 Internet Explorer(IE) 浏 览 器 ， 并 与 
Windows 95 操作 系统 进行 捆绑 销售 ，1997 年 推出 正 4， 增 加 了 活动 桌面 、 频 道 、FrontPage 


Express. Web 发 布 向 导 等 功能 ， 后 来 与 Windows 98 捆绑 在 一 起 销售 。 

目前 国内 使 用 率 最 高 的 是 2001 年 发 布 的 下 6， 它 集成 在 Windows XP 操作 系统 中 。 由 于 
Windows 在 操作 系统 领域 占有 相当 高 的 市 场 份额 ， 随 之 一 起 销售 的 正 系列 浏览 器 也 获得 了 相 
当 高 的 市 场 占有 率 。 但 随后 微软 公司 放 慢 了 浏览 器 开发 的 步伐 ,随后 的 几 年 中 并 没有 新 版 本 的 
浏览 器 问世 。 鉴 于 Firefox. Opera 等 浏览 器 带 来 新 的 竞争 压力 ， 微 软 公 司 后 来 决定 加 大 对 浏览 
器 的 开发 力度 。 

2006 年 10 月 18 H, IE7 浏览 器 发 布 , 它 支持 标记 式 浏览 、RSS 聚合 , 增加 了 快速 选项 卡 、 
反 钓 鱼 攻击 以 及 页 面 整体 缩放 等 功能 (目前 beta 版 的 TES 浏览 器 也 已 经 发 布 )。 

专门 介绍 TE 浏览 器 的 微软 官方 页 面 的 地 址 如 下 : 


http://www.microsoft.com/china/windows/products/winfamily/ie/default.mspx 


该 页 面 当 前 介绍 的 TE 版 本 为 下 7， 如 图 1-4 所 示 。 


"ie, Windows 


Wndowe Vita | Windows X2 | Winzowr Lve | Windows 3U = 


Windows Internet Explorer 
Eu RSS dm 


我 们 听 到 


ASK EUM CUM NO z 
@ intemet| RAES: 有 用 ^u» - 


Bl 1-4 使 用 Internet Explorer 7 浏览 器 


1.4.3 Mozilla Firefox 


Mozilla Firefox(http://www.mozilla.org.cn)4é tH Mozilla 基金 会 与 数 百 个 志愿 者 所 开发 的 网 
页 浏览 器 ， 如 图 1-5 所 示 。Mozilla 基金 会 的 前 身 是 网 景 公 司 内 部 成 立 的 Mozilla 组 织 ， 为 的 是 
在 和 微软 竞争 中 扭转 矣 势 ，Mozilla 组 织 专门 负责 维护 包括 Netscape Navigator 浏览 器 在 内 的 多 
种 网 络 应 用 软件 。 后 来 ，Mozilla 组 织 注册 成 为 非 营 利 机 构 ， 并 正式 更 名 为 Mozilla 基金 会 。 

Firefox 1.0 正式 发 布 于 2004 年 11 月 9 日 ， 它 支持 标记 浏览 、RSS 和 多 种 扩展 。2006 年 10 
月 24 H, Firefox 2.0 版 发 布 。 现 在 它 的 3.0 beta 版 也 已 经 发 布 。 
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器 支持 同时 打开 多 个 选项 卡 ， 支 持 BT 下 载 ， 具 有 鼠标 手势 功能 和 预 
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HTML+CSS 网 页 布局 开发 指南 


* 
Ej IE 浏览 器 相 比 , Firefox 更 符合 Web 标准 , 这 就 是 说 它 会 以 正确 的 方式 将 页 面 显 示 出 来 。 
由 于 Firefox 


上 的 各 种 插件 和 工具 非常 丰富 ， 提 高 了 Web 开发 人 员 的 工作 效率 。 因 此 它 的 口碑 


要 好 于 正 浏览 器 。 
FCE) 
Ba pit yen Ho pomat Toe Heb 
Folke- J Ch 
E rocta | recor web browner G 


Firefox 2 


SG New Firefox Add-ons 


(E test hencerors 2 


1-5 Firefox2 浏览 器 


1.4.4 Opera 


Opera Software 开发 的 Opera(http:/www.opera.com) 浏 览 器 ( 见 图 1-6) 是 一 款 适 用 于 各 种 平 
品 的 高 品质 、 多 平台 产品 。 目 前 其 最 新 版 本 为 9.5， 该 版 本 浏览 


览 页 面 缩 略 图 功能 。 


Opera 95 


图 1-6 Opera 9 浏览 器 


c 
Opera 声称 自己 是 “世界 上 最 快 ” 的 浏览 器 ， 多 年 以 来 一 直 保持 着 世界 第 一 的 称号 。 它 能 
充分 利用 缓存 机 制 ， 快 速 载 入 页 面 。 
1.4.5 Safari 


Safari(http://www.apple.com/safari) 本 是 苹果 电脑 中 使 用 的 Mae OS X 操作 系统 中 的 默认 浏 
览 器 ， 目 前 也 推出 了 运行 于 Windows 平台 上 的 Safari 3， 如 图 1-7 所 示 。 


Safari 3 
The world's best browser. 
on Windows, too. 


er Watch the demo» 


Download Beta Now æ 


Free for Mac + PC 


12 reasons you'll love Safari. 


1 Boeing Performance LC e 


2. Elegant User Interface 
3 tay oookmarts DŘ 
4. pop-up Boing 


1-7 Windows 平台 上 的 Safari 3 浏览 器 


1.46 ”其 他 浏览 


不 少 使 用 QQ 即时 通信 工具 的 用 户 也 使 用 TT(Tencent Traveler，http:/Wtt.qq.com) 浏 览 器 ,， €E 
是 腾讯 公司 集成 在 QQ 中 的 一 款 浏 览 器 ， 目 前 也 提供 独立 版 本 的 下 载 。 它 支持 多 页 面 浏览 、 最 
近 浏览 和 智能 屏蔽 等 功能 。 

另 一 款 不 得 不 提 的 浏览 器 就 是 邀 游 浏览 器 (Maxthon Browser，http://www.maxthon.cn)， 它 
由 北京 傲游 天 下 科技 有 限 公 司 开发 ， 是 一 款 基 于 IE 内 核 的 、 多 功能 、 个 性 化 、 多 页 面 浏览 器 。 
它 允 许 在 同一 窗口 内 打开 任意 多 个 页 面 , 减少 了 浏览 器 对 系统 资源 的 占用 率 ， 同 时 它 又 能 有 效 
防止 恶意 插件 ， 阻 止 各 种 弹出 式 广告 ， 加 强 网 上 浏览 的 安全 。 比 较 有 特色 的 功能 有 鼠标 手势 、 
NL. Biik WERE PERS. 


eg 


| 2 
| 网 页 布局 开发 指南 


1.5 Web 技术 的 未 来 


随 着 Web 2.0 应 用 的 不 断 增多 ， 网 页 越 来 越 强 调 丰 富 的 互动 体验 ， 逐 渐 缩 小 与 桌面 应 用 程 
序 之 间 的 使 用 差距 ， 使 其 看 起 来 更 像 是 一 个 应 用 程序 而 不 是 一 个 普通 的 网 页 。 对 此 ，Microsoft 
和 Adobe 两 大 公司 都 提出 了 相应 的 解决 方案 , 希望 通过 出 色 的 用 户 交 互 方式 和 音频 、 视 频 等 多 
媒体 技术 展现 下 一 代 的 Web 应 用 。 


1.5.1 Microsoft Silverlight 


Microsoft Silverlight( 见 图 1-8 左 ) 是 一 个 跨 浏览 器 的 、 跨 平台 的 插件 ， 为 网 络 带 来 了 媒体 体 
验 和 丰富 的 交互 式 应 用 。Silverlight 提供 灵活 的 编程 模型 ， 其 1.0 版 本 支持 Ajax. JavaScript 和 
DHTML 技术 ，1.1 版 本 更 添加 了 对 VB.NET、C#、Python、Ruby 等 语言 的 支持 ， 可 以 很 方便 
地 集成 到 现 有 的 网 络 应 用 程序 中 。 

Silverlight 技术 提供 了 一 种 全 新 的 语言 : XAML(XML Application Markup Language)， 并 提 
供 相应 的 编程 接口 ， 供 Web 设计 人 员 和 程序 开发 人 员 共同 使 用 。 

Silverlight 旨 在 创建 一 种 与 桌面 程序 相似 的 Web 应用， 最终 使 二 者 达到 一 致 。 


1.5.2 Adobe Flex 


Adobe Flex( 见 图 1-8 右 ) 是 一 个 高 效 、 开 源 的 框架 ， 用 来 构建 和 维护 表现 力 丰富 的 Web 应 
用 程序 ， 它 支持 各 种 主流 浏览 器 和 不 同 的 平台 。Flex 提供 一 种 现代 的 、 标 准 化 的 语言 和 编程 模 
型 , 支持 常见 的 设计 模式 。 其 中 , MXML 是 一 种 基于 XML 的 语言 , 用 来 创建 用 户 界面 和 行为 。 
ActionScript 3 是 一 种 面向 对 象 的 编程 语言 ， 通 过 它 来 实现 客户 端的 逻辑 。 


lverlight 


Æ 1-8 Microsoft Silverlight 与 Adobe Flex 


使 用 Flex 开发 的 应 用 程序 可 运行 于 安装 了 Adobe Flash Player 的 浏览 器 中 ， 或 通过 Adobe 
AIR 运行 于 桌面 。 这 使 得 Flex 应 用 程序 可 以 跨 浏 览 器 、 跨 平台 执行 。 

Flex 可 以 使 Web 开发 人 员 快 速 地 创建 Web 应 用 ， 它 提供 了 高 效 的 开发 环境 (Adobe Flex 
Builder、Adobe Live Cycle Data Services ES) 和 一 些 高 级 数据 服务 的 集合 。 


G 延伸 : ”RIA(Rich Internet Application， 富 因特网 应 用 程序 ) 指 的 是 一 种 具有 丰富 交互 能 力 
的 应 用 程序 ， 这 是 相对 于 传统 的 网 页 而 言 的 。RIA 能 提供 比 基 于 (X)HTML 的 网 
络 应 用 更 加 健壮 、 更 加 灵活 和 更 加 令 人 感 兴趣 的 可 视 化 特性 。 
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因特网 的 出 现 使 得 人 们 可 以 方便 地 访问 其 他 计算 机 中 的 资源 , 而 万 维 网 则 使 资源 能 够 以 网 
页 的 形式 供 他 人 浏览 。 

HTML 和 XHTML 是 一 种 用 来 创建 Web 文档 的 语言 ， 文 档 中 可 以 包含 指向 其 他 资源 的 链 
接 ， 通 过 链接 可 以 访问 其 他 资源 。CSS 用 来 控制 页 面 的 外 观 ，DOM 和 脚本 语言 可 实现 页 面 的 
AH. 

Web 标准 由 一 系列 的 规范 组 成 ， 使 用 Web 标准 进行 网 页 开发 能 在 诸多 方面 体现 出 优势 。 

浏览 器 与 网 页 密 不 可 分 ， 本 章 介 绍 了 一 些 主要 浏览 器 的 发 展 及 功能 特点 。 

本 章 最 后 介绍 了 两 种 较 新 的 Web 开发 技术 ，Microsoft Silverlight 和 Adobe Flex。 

下 一 章 将 介绍 HIML 和 XHTML 的 基础 知识 ， 为 进一步 学 习 CSS 打 好 基础 。 
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#2% HTML 和 XHTML 基础 


本 章 将 向 读者 介绍 HTML 和 XHTML 的 基本 知识 ， 将 从 编写 一 个 简单 的 Web 页 面 开始 ， 
逐步 讲解 标记 、 元 素 、 属 性 等 有 关 概 念 ， 接 着 介绍 CX)HTML 文档 的 基本 结构 及 文档 树 的 概念 ， 
最 后 说 明 如 何 编写 符合 标准 的 COHTML 文档 。 

对 COHTML 已 经 很 熟悉 的 读者 可 以 跳 过 本 章 ， 继 续 阅 读 后 面 的 内 容 。 

本 章 主要 内 容 
XHTML 中 的 标记 、 元 素 和 属性 的 概念 
(X)HTML 中 的 注释 、 空 白 和 特殊 字符 
COHTML 的 文档 基本 结构 组 成 
文档 树 的 概念 
如 何 编写 标准 的 (X)HTML 代码 


2.1 页 面 设计 初探 


2.1.1 编写 第 一 个 Web 页 面 


在 大 多 数 介绍 编程 语言 的 书籍 中 , 第 一 个 程序 的 基本 功能 几乎 都 是 输出 那 耳熟能详 的 一 句 
if: Hello, World!。 我 们 的 程序 也 与 此 类 似 ， 本 小 节 将 带领 读者 完成 第 一 个 Web 页 面 的 制作 ， 
功能 非常 简单 ， 在 页 面 输出 以 下 几 个 字符 : 

Hello, XHTML and CSS! 

首先 打开 Windows 的 记事 本 (或 者 任何 你 喜欢 使 用 的 文本 编辑 器 )， 输 入 以 下 内 容 : 

<html> 

<head> 


<title> 第 一 个 Web 页 面 </title> 
</head> 


<body> 
<hl>Hello, XHTML and CSS!«/hl» 
</body> 
</html> 


把 此 文件 保存 为 frsthtml， 注 意 文 件 的 后 缀 名 为 “html” 而 非 “txt”( 见 图 2-1). 
然后 在 浏览 器 中 打开 这 个 文件 ， 产 生 如 图 2-2 所 示 的 效果 。 


<head> 
Ktitle»3 —4- web Ej /title» 


</head> 保存 在 四 :| 己 ws j olcam 


<body> 
<h1>Hello, XHTML and CSS?</h1> 
</body> 
</html> 


xm&m. em ë o ë 
RARUD: [所 有 文件 zj 职 消 
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Hello, XHTML and CSS! 


2-2 在 浏览 器 中 打开 first.html 文件 


2.1.2. first.html 中 都 有 些 什 么 


在 我 们 编写 的 HTML. 文件 中 ， 开 始 和 结束 的 位 置 包含 这 样 的 内 容 : <html> 和 </html>。 这 
是 一 对 标记 (Tag)， 用 来 告诉 浏览 器 文件 中 包含 的 内 容 是 以 HTML 文档 方式 编写 的 。 

在 HTML 和 XHTML 文档 中 主要 包含 两 个 部 分 : 头 (head) 部 和 主体 (body)， 在 我 们 的 范例 
中 同样 包含 了 这 两 个 部 分 。 头 部 用 如 下 标记 表示 : <head> 和 </head>。 头 部 一 般 放置 网 页 标题 、 
与 该 网 页 有 关 的 元 信息 、 脚 本 代码 和 样式 代码 等 。 本 例 中 我 们 只 放置 了 一 个 网 页 标题 (title), E 
由 标记 <tile> 和 </tile> 表 示 ， 位 于 这 两 个 标记 之 间 的 文字 会 显示 在 浏览 器 的 标题 栏 中 ( 见 图 
2-2)。 主 体 部 分 由 标记 <body> 和 </body> 表 示 ， 主 体 区 域 包含 HTML 文档 的 内 容 ， 这 些 内 容 会 
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显示 在 浏览 器 中 。 在 我 们 的 范例 中 ,主体 区 域 只 包含 一 对 <h1> 和 </h1> 标 记 及 标记 之 间 的 文字 。 
<h1> 和 </h1> 标 记 表 示 网 页 内 容 中 的 标题 ，h 是 英文 heading( 标 题 ) 的 首 字母 ， 后 面 的 1 表示 它 
是 第 一 级 标题 ， 标 记 之 间 的 文字 就 是 该 标题 的 内 容 ， 并 能 显示 在 浏览 器 窗口 中 ( 见 图 2-2)。 


22 标记 、 元 素 和 属性 


2.2.1 标记 、 内 容 和 元 素 

1. 标记 

COHTML 的 关键 内 容 之 一 就 是 标记 (Tag)， 任 何 标记 语言 也 是 如 此 。 标 记 是 一 些 符号 ， 用 
来 区 分 文档 中 的 不 同 部 分 ， 同 时 还 能 标识 出 内 容 的 类 型 。 浏 览 器 通过 识别 这 些 标记 来 正确 地 处 
理 不 同 的 内 容 。 标 记 的 描述 性 名 称 一 般 都 能 体现 出 其 所 包含 的 内 容 类 型 ， 比 如 标题 、 段 落 、 列 
表 、 图 像 等 。 

(X)HTML 中 的 标记 是 由 一 对 尖 括 号 “<” 和 “>” 括 起 来 的 ， 用 来 区 分 其 他 普通 的 文本 。 
左 尖 括号 “<” 表 明 一 个 标记 的 开始 , 紧 跟着 是 标记 名 称 (Tag Name), 或 者 称 作 元 素 名 称 (Element 
Name)， 最 后 以 右 尖 括 号 “>” 作 为 标记 的 结束 。 比 如 下 面 这 个 标记 就 表示 一 个 段落 (Paragraph) 
的 开始 : 


<p> 


在 HTML 规范 中 ,标记 名 称 是 不 区 分 大 小 写 的 ， 因 此 <body>、<BODY> 和 <bOdY> 表 示 相 
同 的 标记 ， 但 是 XHTML 规范 中 要 求 标记 名 称 要 采用 小 写 的 形式 。 

大 部 分 标记 是 成 对 出 现 的 ， 由 起 始 标 记 来 表示 一 段 内 容 的 开始 ， 由 结束 标记 表示 结束 。 结 
束 标记 比 起 始 标 记 多 一 个 斜 杜 “/”， 它 位 于 标记 名 称 之 前 。 起 始 标 记 和 结束 标记 之 间 包 含 的 
部 分 称 为 内 容 (Content)。 下 面 这 段 代码 表 示 了 一 个 完整 的 段落 : 

<p> 这 是 一 段 文字 。</p> 


2. zx 

起 始 标 记 、 结 束 标记 和 其 中 的 内 容 构成 了 一 个 完整 的 元 素 (Element)， 元素 可 视 为 一 个 容器 
(Container)， 将 内 容 包 含 在 其 中 。 元 素 是 (X)HTML 文档 基本 的 组 成 单位 。 一 些 空 元 素 (Empty 
Element) 本 身 不 包含 也 不 可 能 包含 任何 内 容 , 这 些 元 素 可 以 没有 结束 标记 。 但 是 在 XHTML 中 ， 
这 样 的 元 素 需要 是 自我 结束 (Self-closed) 的 。 在 起 始 标记 右 尖 括号 之 前 加 一 个 斜 枉 “/” 即 可 。 
比如 表示 换行 标记 本 身 不 包含 其 他 内 容 ， 它 的 标记 写法 如 下 : 

<br /> 

img 元 素 用 来 向 页 面 中 添加 图 像 文件 ， 它 也 不 包含 任何 内 容 ， 因 而 也 是 自我 结束 的 : 

<img src-"logo.gif" alt-"logo" /> 

f$ p. hl, h2 这 样 能 够 包含 内 容 的 元 素 被 称 为 非 蔡 换 元 素 (Non-replaced Elements). ifii f$ img 
这 样 的 元 素 被 称 为 是 替换 元 素 (Replaced Elements)。 替 换 元 素 的 含义 是 ， 当 文档 显示 在 浏览 器 
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中 时 ， 替 换 元 素 的 位 置 上 将 会 出 现 页 面 之 外 的 资源 (如 图 像 、Flash 动画 等 )。 

COHTML 元 素 允 许 杠 套 (Nested) 出 现 ， 比 如 以 下 代码 中 pp 元 素 除了 包含 文字 外 ， 还 包含 一 
个 em 元 素 (Emphasize， 表 示 强 调 ): 
<p> 这 个 内 容 <em> 非 常 重要 </em>。</p> 
赃 套 必须 正确 , 元 素 的 起 始 标 记 和 结束 标记 之 间 不 能 只 包含 一 个 起 始 标 记 或 者 一 个 结束 标 
比如 下 面 的 写法 就 是 错误 的 : 
<p> 这 个 内 容 <em> 非 常 重要 。</p></em> 
这 里 , p 元 素 中 只 包含 了 一 个 em 元 素 的 起 始 标 记 ，em 元 素 中 也 只 包含 了 一 个 p 元 素 的 结 
束 标记 。 
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2.22 元 素 类 型 


(XHTML 元 素 可 以 划分 为 两 大 类 : 块 级 (Block-level) 元 素 和 内 联 (Inline) 元 素 。 块 级 元 素 所 
包含 的 内 容 独 占 一 行 ， 比 如 段落 元 素 p、 列 表 元 素 i、 标 题 元 素 hl-h6 等 。 请 看 如 下 代码 : 

<html> 

<head> 


<title> 块 级 元 素 </title> 
</head> 


<body> 

<h2> 块 级 元 素 </h2> 

<p> 块 级 元 素 会 独占 一 行 。</p> 

<p> 块 级 元 素 前 后 都 产生 换行 。</p> 

</body> 

</html> 

打开 Windows 记事 本 ， 输 入 以 上 代码 并 保存 为 block.html。 然 后 在 浏览 器 中 打开 它 ， 会 出 
现 如 图 2-3 所 示 的 效果 。 我 们 看 到 ho 元 素 和 两 个 p 元 素 中 的 文字 都 单独 占用 一 行 的 空间 。 


TJ RUK - Microsoft Internet Explorer. 
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块 级 元 素 

块 级 元 素 会 独占 一 行 


块 级 元 素 前 后 都 产生 换行 。 


2-3 ” 块 级 元 素 的 显示 
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内 联 元 素 会 紧 挨 着 相 邻 元 素 ， 前 后 不 产生 换行 。 比 如 表示 强调 内 容 的 em 元 素 、 表 示 链 接 
的 a 元 素 。 请 看 如 下 示例 : 

<html> 

<head> 


<title> 内 联 元 素 </title> 
</head> 


<body> 
<span><em> 内 联 元 素 </em> 会 紧 挨 着 相 邻 的 元 素 ，</span> 
<span> 元 素 前 后 不 产生 换行 。</span> 


</body> 
</html> 


在 记事 本 中 输入 以 上 代码 并 保存 为 inline.html， 打 开 后 会 产生 如 图 2-4 所 示 的 效果 。 


FARR - Microsoft Internet Explorer. E oj xi 
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2-4 ”内 联 元 素 的 显示 


COHTML 的 元 素 都 是 有 含义 的 ， 元 素 的 类 型 和 元 素 的 含义 是 一 致 的 ， 比 如 一 个 段落 通常 
和 其 他 段落 之 间 有 换行 ， 因 此 p 元 素 属于 块 级 元 素 是 非常 合理 的 。 

块 级 元 素 允 许 包含 其 他 的 块 级 元 素 、 文 本 和 内 联 元 素 @ 元 素 例外 )。 而 内 联 元 素 只 允许 包含 
文本 和 其 他 内 联 元 素 。 


2.2.3 属性 


每 个 元 素 的 起 始 标 记 内 可 以 添加 属性 (Attribute)， 用 来 提供 一 些 元 素 的 附加 信息 。 属 性 由 
属性 名 加 属性 值 构 成 ， 多 个 属性 之 间 用 空白 相隔 。 比 如 : 


<p class-"normal" id="pl"> 这 是 一 段 文字 。</p> 


Pp 元素 包含 了 两 个 属性 ， 其 中 class 属性 的 值 是 normal, id 属性 的 值 是 p1。 通 过 添加 属性 ， 
就 可 以 达到 把 该 段落 同 其 他 段落 区 分 开 来 的 目的 。XHTML 要 求 属性 名 和 预定 义 的 属性 值 必须 
小 写 ， 且 属性 值 必须 由 引号 ( 单 引号 或 双 引号 ) 引 起 来 。 

图 2-5 总 结 了 目前 我 们 学 习 过 的 一 些 基 本 概念 。 


元 素 
起 始 标记 内 容 结束 标记 
«p class="normal"> 这 是 一 段 文字 。</p> 
| p pe l 
标记 名 属性 名 属性 值 标记 名 


属性 
图 2-5 标记 、 元 素 和 属性 
不 同 的 (X)HTML 元 素 可 以 拥有 不 同 的 属性 , 但 是 以 下 4 个 属性 是 每 个 元 素 都 可 以 使 用 的 ， 
它们 是 (X)HTML 的 核心 属性 。 
1.id 属性 
id 属性 用 来 给 元 素 分 配 一 个 唯一 的 标识 符 。 注 意 标 识 符 必 须 是 唯一 的 ， 多 个 元 素 不 能 共用 
同一 个 id 属性 值 。 例 如 : 
«p id="myParagraph"> 本 段 文字 被 指定 了 id 属性 </p> 
上 面 的 p 元 素 的 id 属性 值 为 myParagraph, 后 面 会 讲 到 , 我们 通常 利用 这 个 id 属性 值 给 某 
个 特定 的 元 素 指 定 CSS 样式 。 比 如 : 


pimyParagraph( 
color:blue; 


) 

这 是 一 条 CSS 的 样式 规则 ， 它 将 id 为 myParagraph 的 p 元 素 中 的 文字 颜色 设 为 蓝 色 。 由 
于 id 属性 需要 满足 唯一 性 的 要 求 ， 因 此 该 规则 只 对 这 个 p 元 素 有 效 。 

2. class 属性 

class 属性 指明 元 素 属于 的 一 个 或 多 个 类 别 。 与 id 属性 不 同 , 多 个 元 素 可 以 拥有 相同 的 class 
属性 。 而 且 一 个 元 素 也 可 以 同时 属于 多 个 类 ， 多 个 类 名 之 间 用 空格 隔 开 。 比 如 : 

«p id-"myParagraph" class="highlighted"> 本 段 文字 被 指定 了 class 属性 </p> 

p 元 素 除了 被 指定 了 一 个 唯一 的 id 值 外 , 还 属于 highlighted 类 。 由 于 多 个 元 素 可 以 属于 同 

-个 class, CSS 通常 利用 这 个 属性 给 某 些 特定 的 元 素 添加 样式 。 比 如 : 


.highlighted( 
font-weight:bold; 
H 


上 面 的 CSS 规则 将 属于 highlighted 类 的 所 有 元 素 的 文字 以 粗 体 显示 。 

3. style 属性 

style 属性 指定 元 素 的 CSS 样式 。 以 这 种 方式 添加 的 样式 称 作 内 联 样式 (Inline Style), Et: 
«p style-"color:red; font-size:12px;">style 属性 用 来 给 元 素 添加 CSS 样式 。</p> 


以 上 代码 中 的 style 属性 将 p 元 素 内 的 文字 设 为 红色 ， 字 体 大 小 为 12px。 尽 管 使 用 style 属 
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性 添加 样式 是 可 以 的 , 但 是 实际 编写 网 页 样式 时 不 使 用 这 种 方式 ， 因 为 它 将 样式 信息 和 文档 内 
容 混合 在 一 起 ， 使 代码 变 得 混乱 、 难 以 管理 。 


4. title 属性 
title 属性 给 元 素 提供 一 个 标题 。 大 多 数 浏 览 器 会 以 提示 框 (Tooltip) 的 形式 显示 title 属性 值 
的 内 容 。 比 如 : 


<p title=" 这 是 一 个 p 元 素 "> 这 是 一 段 文字 。</p> 
如 图 2-6 PRA IE 浏览 器 中 的 效果 。 
这 是 一 段 文字 。 
2-6 title 属性 的 作用 


2.3 注释 、 空 白 和 特殊 字符 


2.3.1 注释 


COHTML 文档 中 可 以 包含 注释 信息 ， 这 些 内 容 不 会 被 浏览 器 显示 在 页 面 上 ， 只 有 在 查看 
页 面 源 文件 时 才 会 浏览 到 注释 信息 。(X)HTML 文档 的 注释 以 符号 “<!--” 开 始 ， 以 符号 “-->” 
结束 。 例 如 : 


<!-- 主 体 区 域 开始 --> 
<body> 


在 以 上 代码 中 ，body 元 素 之 前 的 内 容 就 是 注释 信息 ， 它 不 会 被 浏览 器 显示 出 来 。 当 页 面 内 
容 变 得 庞大 时 ， 适 当 添加 注释 信息 有 助 于 编程 人 员 理解 代码 ， 提 醒 协 同 的 开发 人 员 代码 的 修改 
和 更 新 。 注 意 注释 不 能 嵌 套 出 现 。 


2.3.2 空白 的 处 理 


为 了 使 (X)HTML 文档 便于 阅读 ， 我 们 通常 会 在 编写 代码 的 过 程 中 采用 某 种 样式 风格 。 比 
如 适当 添加 换行 符 、 制 表 符 (CTab 键 ) 等 。 比 如 我 们 通常 会 把 代码 写成 如 下 样式 : 

«html» 

<head> 

<tit1le> 文 档 标 题 </title> 

</head> 


<body> 
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«div» 
<p> 文 档 内 容 </p> 

</div> 

</body> 

</html> 

而 不 是 下 面 这 样 : 


<html><head><title> 文 档 标 题 </title></head><body><div><p> 文 档 内 容 </p></div> 
</body></html> 


以 上 两 种 写法 最 终 产生 的 页 面 效 果 是 一 致 的 , 但 是 第 一 种 更 利于 阅读 ， 能 更 加 清晰 地 展示 
文档 内 容 和 结构 。 之 所 以 这 两 种 写法 不 同 的 代码 具有 一 致 的 效果 ， 是 因为 浏览 器 会 忽略 文档 中 
多 余 的 换行 符 、 制 表 符 和 空格 符 ， 将 它们 都 视 为 一 个 空格 符 。 换 行 符 、 制 表 符 和 空格 符 统称 为 
空白 (White Space)。 本 例 中 ， 对 于 body 元 素 之 外 的 元 素 ， 它 们 的 内 容 并 不 显示 在 浏览 器 中 ， 因 
此 不 存在 显示 的 问题 ， 对 于 body 元 素 之 内 的 元 素 ， 空 白 都 是 在 元 素 之 间 产 生 的 ， 且 元 素 类 型 
都 是 块 级 元 素 ， 空 白 不 影响 它们 的 显示 效果 。 但 是 如 果 空 白 添加 在 元 素 内 容 之 中 ， 或 者 添加 在 
内 联 元 素 之 间 ， 则 浏览 器 会 在 相应 的 位 置 显示 一 个 空格 符 ， 请 看 如 下 示例 : 

<html> 

<head> 


<title> 空 白 处 理 1</title> 
</head> 


<body> 
<div> 


<p><span> 换 行 符 、 制 表 符 和 空格 符 </span><span> 统 称 为 空白 。</span></p> 
</div> 
</body> 
</html> 


P 元 素 中 文字 之 间 、span 元 素 之 间 都 没有 空白 ， 这 时 浏览 器 的 显示 效果 如 图 2-7 所 示 。 
换行 符 、 制 表 符 和 空格 符 统称 为 空白 。 
图 2-7 元 素 内 容 中 和 内 联 元 素 之 间 没有 空白 
现在 将 代码 做 如 下 调整 ， 添 加 一 些 空白 : 


«html» 

<head> 

<title> 空 白 处 理 2</title> 
</head> 


<body> 


«div» 


<p><span> 换 行 。 符 、 制 表 符 


和 空格 符 </span> 
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<span> 统 称 为 空白 。</span></p> 

</div> 

</body> 

</html> 

可 以 看 到 ， 我 们 在 p 元 素 内 容 之 间 和 span 元 素 之 间 添 加 了 一 些 空白 (一 个 回 车 符 不 会 产生 

空格 ， 所 以 我 们 在 span 元 素 中 添加 了 两 个 连续 的 回 车 符 )， 浏 览 器 的 显示 效果 如 图 2-8 所 示 。 

换行 符 、 制 表 符 和 空格 符 统称 为 空白 。 
图 2-8 浏览 器 会 将 多 个 空白 显示 为 一 个 空格 符 

由 此 我 们 得 知 ， 空 白 的 添加 既 要 保证 代码 清晰 同时 又 不 破坏 页 面 原 有 的 显示 效果 。 如 果 我 


们 希望 页 面 的 样式 和 代码 中 的 效果 一 致 呢 ” 可 以 使 用 (X)HTML 的 pre 元 素 , 该 元 素 中 的 内 容 都 
将 严格 按照 代码 中 出 现 的 字符 效果 显示 。 比 如 我 们 将 上 例 body 元 素 之 间 的 内 容 改 写 为 : 


<pre> 


<p><span> 换 行 。 符 、 制 表 符 


和 空格 符 </span> 


<span> 统 称 为 空白 。</span></p> 
</pre> 
则 浏览 器 的 显示 效果 如 图 2-9 所 示 ( 图 2-9 中 为 使 用 正 浏 览 器 的 效果 ,注意 使 用 pre 元素 后 ， 
其 中 文字 大 小 也 发 生 了 变化 ， 而 在 Firefox 浏览 器 中 ， 字 体 的 大 小 不 会 发 生变 化 )。 
换行 。” m. MEN 


和 空格 符 
统称 为 空白 。 


2-9 pre 元 素 中 的 内 容 将 严格 按照 代码 中 的 字符 显示 (IE 浏览 器 ) 


2.3.3 ”特殊 字符 


有 时 候 我 们 需要 在 页 面 中 放置 一 些 特殊 的 字符 ， 比 如 表示 版 权 的 符号 “@”、 表 示 注 册 商 
标的 符号 “@” 等 。 

此 外 ,浏览 器 有 时 会 把 小 于 号 “<” 和 大 于 号 “>” 当 作 是 一 个 标记 的 开始 和 结束 标志 ， 而 
会 显示 在 页 面 上 。 这 可 能 会 导致 页 面 的 某 些 内 容 显 示 不 正常 。 

那么 这 些 符号 该 如 何 显示 呢 ? 

COHTML 提供 了 若干 字符 实体 (Character Entities) 来 表示 这 些 特殊 字符 ， 字 符 实 体 
“&name” 或 者 “&code” 来 表示 ， 表 2-1 列 出 了 一 些 常用 的 字符 实体 。 


e 


&name &code 说 明 
&amp: &#038 表示 和 符号 
&lt: &#060: 小 于 号 
&gt: &#062 Xxr5 
&trade; &#153 商标 
&nbsp &#160; 不 产生 换行 的 空格 
&cop &#169: 版 权 符号 
Rre &174. 注册 商标 


Q) 延伸 以 下 网 址 提供 了 HTMLA 和 XHTML 所 使 用 的 字符 实体 的 参考 ， 有 兴趣 的 读者 
可 以 访问 这 个 链接 获得 更 多 关于 字符 实体 的 知识 。 网 址 : 
http://www.cookwood.com/html/extras/entities.html 


24 (X)HTML 文档 结构 


在 本 章 2.1 节 中 ， 我 们 通过 编写 一 个 简单 的 Web 页 面 初步 了 解 了 (X)HTML 文档 的 基本 组 
成 部 分 ， 在 本 节 中 将 详细 讲解 HTML 和 XHTML 的 文档 结构 ， 以 及 它们 之 间 的 不 同 之 处 。 


2.4.1 文档 类 型 声明 


通俗 地 讲 , 文档 类 型 声明 (Document Type Declaration, DTD) 的 作用 就 是 告知 浏览 器 文档 中 
包含 的 内 容 属 于 什么 类 型 ， 以 便 用 相应 的 规则 来 解释 和 处 理 各 种 标记 。 若 使 用 了 不 正确 的 文档 
声明 或 根本 不 进行 文档 声明 ， 浏 览 器 会 按 自 己 的 方式 进行 解析 ， 可 能 会 产生 预想 不 到 的 页 面 效 
果 。 因 此 一 个 标准 的 (X)HTML 文档 必须 包含 相应 的 文档 类 型 声明 ， 它 位 于 文档 的 最 开始 处 。 
Q) 延伸 :， 文档 类 型 声明 错误 或 缺失 的 COHTML 文档 会 使 浏览 器 工作 于 兼容 模式 (Compatibility 

Mode) 或 怪异 模式 (Quirks Mode)。 此 时 的 浏览 器 会 模拟 旧版 本 的 行为 对 页 面 进行 
分 析 和 处 理 。 著 名 的 CSS 专家 Eric Meyer 在 下 面 这 个 网 址 中 展示 了 不 同 浏览 器 
是 如 何 根据 文档 类 型 声明 来 选择 相应 工作 模式 的 : 
http://meyerweb.converic/dom/dtype/dtype-grid.html 

(1. HTML 4.01 定义 了 三 种 文档 类 型 : 严格 型 (Sticb、 过 渡 型 (TransitionaD 和 框架 型 (Frameseb)。 

© ”严格 型 要 求 不 能 使 用 任何 表现 层 的 属性 和 元 素 ， 页 面 样式 全 部 交 给 CSS 控制 。 严 格 
型 的 DTD 代码 如 下 : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"» 
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© ”过渡 型 要 求 比较 宽松 ， 人 允许 使 用 表现 层 的 属性 和 元 素 ， 当 用 户 浏览 器 不 支持 CSS FE 
式 时 ， 可 以 使 用 这 种 方式 控制 页 面 样式 。 过 渡 型 的 DTD 代码 如 下 : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"» 
图 ”框架 型 用 于 那些 使 用 框架 的 页 面 ， 除 了 允许 框架 替代 body 外 ， 框 架 型 和 过 渡 型 的 要 
求 是 一 致 的 。 框 架 型 的 DTD 代码 如 下 : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"» 
(2) XHTML 1.0 也 提供 了 三 种 文档 类 型 声明 可 供 选择 : 严格 型 、 过 渡 型 和 框架 型 。 
© 严格 型 要 求 不 能 使 用 任何 表现 层 的 属性 和 元 素 ， 例 如 表示 换行 的 br 元 素 、 表 示 背 景 
ERI bgcolor 属性 等 都 不 允许 使 用 。 严 格 型 的 DTD 代码 如 下 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"» 
© 过 渡 型 的 要 求 非常 宽松 ， 它 允许 继续 使 用 HTML 4.01 的 标识 ， 但 是 要 符合 XHTML 
的 语法 。 过 渡 型 的 DTD 代码 如 下 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 
© ”框架 型 专门 针对 框架 页 面 设计 使 用 ， 如 果 你 的 页 面 中 包含 有 框架 ， 则 需要 采用 这 种 
DTD。 框架 型 的 DTD 代码 如 下 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtm11/DTD/xhtmll-frameset.dtd"» 
严格 地 讲 ，XHTML 只 能 包含 定义 文档 内 容 的 结构 ， 任 何 属于 表现 层 的 属性 和 元 素 都 不 允 
许 出 现 ， 因 此 应 该 使 用 严格 型 的 文档 类 型 声明 。 但 是 严格 型 的 声明 会 大 大 增加 代码 编写 工作 
的 难度 ， 所 以 一 般 情 况 下 使 用 过 渡 型 的 声明 。 本 书 中 的 所 有 示例 均 采用 过 渡 型 的 XHTML 文档 
编写 。 
& 延伸 :文档 类 型 声明 描述 了 文档 中 允许 出 现 的 语法 和 词汇 表 , 也 就 是 定义 了 文档 的 整体 
结构 以 及 文档 的 语法 。 简 而 言 之 ， 它 规定 了 一 个 语法 分 析 器 在 解释 一 个 有 效 的 
XML 文档 时 需要 知道 的 所 有 规则 。 读者 若 想 了 解 更 多 关于 文档 类 型 声明 的 知识 ， 
请 参考 一 些 XML 方面 的 书籍 。 


2.4.2 ”文档 元 素 


html 元 素 表示 了 一 个 COHTML 文档 ， 标 记 <html> 和 </html> 之 间 的 内 容 都 属于 这 个 
COHTML 文档 。html 元 素 包含 文档 头 和 文档 体 两 部 分 内 容 。 
在 使 用 Dreamweaver 创建 XHTML 文档 时 ， 可 以 看 到 html 元 素 会 包含 这 样 一 个 属性 : 
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xmlns-"http://www.w3.0rg/1999/xhtml" 


这 个 属性 定义 了 该 XHTML 文档 所 属 的 命名 空间 ， 简 单 地 讲 ， 命 名 空间 的 作用 就 是 通过 指 
定 一 个 唯一 的 属性 值 (这 里 使 用 的 是 一 个 URL)， 把 本 类 型 的 文档 同 其 他 类 型 的 文档 区 分 开 来 ， 
防止 冲突 的 发 生 。 本 书 中 的 示例 代码 都 会 包含 这 个 属性 。 


2.4.3 ”文档 头 


文档 头 包含 一 些 关 于 本 (X)HTML 文档 的 属性 ， 比 如 文档 标题 、 与 其 他 文档 之 间 的 关系 等 。 
位 于 此 区 域 的 大 部 分 元 素 对 于 页 面 的 访问 者 来 说 都 是 不 可 见 的 。 

文档 头 由 head 元 素 表示 ， 起 始 标 记 <head> 紧 挨 着 <html> 标 记 之 后 ，<head> 和 </head> 之 间 
定义 了 文档 头 部 区 域 。head 元 素 中 通常 会 包含 其 他 一 些 元 素 ， 比 如 title, meta 等 。 这 里 向 读者 
介绍 一 些 常见 的 元 素 。 

1.title 元 素 

title 元 素 用 来 定义 文档 的 标题 。 浏 览 器 一 般 会 在 标题 栏 位 置 显示 这 个 标题 的 内 容 ， 下 面 的 
文档 中 包含 了 一 个 title 元 素 : 

<html> 

<head> 

<title>css 网 页 设计 开发 </title> 

</head> 

</html> 

如 图 2-10 所 示 为 不 同 浏览 器 对 标题 栏 的 处 理 。 

CSS 网 页 设计 开发 - Mozilla Firefox 


Ele Edt Wew Favorites Toos fie gdt View Hitoy Bookmarks T Ele Edt Vew Bookmarks Widgets Tools tH 


Er Ce Ciis NN 
GE 加 -站 国人 m: > -CO 人 NE | fe:/focat 
| Lj Css 网 页 设计 开发 G. 


2-10 title 元 素 在 IE6( 左 )、Firefox( 中 ) 和 Opera( 右 ) 浏 览 器 中 的 显示 情况 
2. meta 元 素 


meta 元 素 用 来 给 文档 添加 附加 的 数据 ,与 title 元 素 不 同 的 是 ，meta 元 素 不 包含 任何 内 容 ， 
通过 元 素 属性 来 达到 添加 附加 数据 的 目的 。meta 元 素 中 的 属性 包括 : charset、content、dir、 
http_equiv、lang、name 和 scheme. 

charset 属性 定义 了 文档 所 使 用 的 字符 集 ， 简 体 中 文 的 字符 集 为 gb2312， 一 般 英文 页 面 的 
字符 集 为 utf-8。 但 是 这 种 方式 是 IE5 以 及 更 早 版 本 的 浏览 器 支持 的 方式 , 这 里 建议 使 用 content 

name, http-equiv 和 content 属性 给 文档 添加 了 一 系列 的 名 / 值 对 ，name 属性 和 http-equiv 
属性 都 可 用 来 定义 名 字 ，content 属性 定义 值 部 分 。 一 些 网 站 会 添加 如 下 的 meta 7625: 

«meta name-"keyword" content=" 购 物 ， 时 装 ， 饮 食 ” /> 
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从 name 属性 的 名 称 就 能 看 出 ， 该 meta 元 素 给 文档 增加 了 一 些 关 键 字 的 信息 。 

使 用 Dreamweaver 创建 的 XHTML 文档 会 包含 以 下 meta 元 素 : 

«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312" /> 

这 个 meta 元 素 告诉 浏览 器 ， 页 面 内 容 类 型 是 texthtml， 使 用 的 字符 集 是 gb2312， 即 简体 
中 文 。 

3. script 元 素 

script 元 素 可 以 给 文档 添加 脚本 代码 。 我 们 既 可 以 将 脚本 代码 写 在 script 元 素 内 容 中 , 又 可 
以 通过 script 元 素 的 src 属性 指定 一 个 外 部 的 脚本 文件 。 比 如 : 


<script language-"javascript" type-"text/javascript" src-"js/load.js"» 
</script> 


language 属性 和 type 属性 分 别 指明 脚本 语言 是 JavaScript， 类 型 是 text/javascript. 

4. style 元 素 

style 元 素 用 来 给 文档 添加 CSS 样式 。 样 式 代码 位 于 <style> 与 </style> 之 间 ， 后 面 会 讲 到 ， 
这 种 方式 添加 的 样式 称 为 嵌入 样式 (Embedded Style)。 比 如 : 


«style type="text/css"> 
pí(color:red;) 
«/style» 


Hp, type 属性 表明 它 的 类 型 是 text/css 

5. link 元 素 

link 元 素 用 来 定义 本 文档 和 其 他 一 些 文档 之 间 的 关系 。 该 元 素 也 可 以 用 来 添加 CSS 样式 ， 
这 种 方式 添加 的 样式 称 为 外 部 样式 (External Style)。 比 如 : 

<link href="styles/global.css" rel="stylesheet" type="text/css"> 

Hp, href 属性 定义 了 link 元 素 的 目标 位 置 ， 这 里 是 一 个 CSS 样式 文件 。rel 属性 定义 了 
本 文档 与 目标 位 置 之 间 的 关系 ， 属 性 值 stylesheet 表明 目标 位 置 的 文档 是 本 文档 的 样式 表单 。 
type 属性 描述 了 目标 位 置 的 文档 类 型 ， 这 里 text/css 表示 它 是 一 个 CSS 文档 。 


2.4.4 ”文档 体 


文档 体 是 真正 放置 页 面 内 容 的 区 域 。<body> 和 </body> 标 记 之 间 的 部 分 就 是 文档 的 主体 部 
分 。 最 简单 的 文档 可 能 只 包含 一 些 文字 ， 复 杂 的 文档 可 能 包含 许多 元 素 ， 比 如 区 域 、 表 格 、 段 
落 、 标 题 、 图 像 、 动 画 等 。 下 面 我 们 将 介绍 一 些 常见 的 (X)HTML 元 素 ， 部 分 元 素 将 会 放 在 后 
续 章 节 中 详细 讲解 。 

1. 段落 


可 能 读者 在 上 小 学 的 时 候 就 听 老 师 讲 过 ,段落 是 根据 文章 或 事情 的 内 容 、 阶 段 划 分 的 相对 
独立 的 部 分 。 类 似 地 ，(X)HTML 文档 也 有 段落 (Paragraph) 元 素 ， 它 使 用 p 元 素 表示 一 个 段落 。 
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在 显示 上 ， 每 个 p 元 素 之 间 会 存在 一 定 的 距离 。 请 看 以 下 代码 : 


<p>HTML 是 Hypertext Markup Language 的 缩写 ， 即 超 文 本 标记 语言 。 它 是 用 于 创建 可 从 一 个 平 
台 移植 到 另 一 平台 的 超 文 本 文档 的 一 种 简单 标记 语言 ， 经 常用 来 创建 Web WE. HTML 文件 是 带 有 格式 
标识 符 和 超 文本 链接 的 内 区 代码 的 ASCII 文本 文件 。 
</p> 
<p>HTML 是 制作 网 页 的 基础 ， 我 们 在 网 络 营销 中 讲 的 静态 网 页 ， 就 是 以 HTML 为 基础 制作 的 网 页 ， 早 期 
的 网 页 都 是 直接 用 HTML 代码 编写 的 ， 不 过 现在 有 很 多 智能 化 的 网 页 制作 软件 (比如 Dreamweaver) 通 
常 不 需要 人 工 去 写 代码 ， 而 是 由 这 些 软件 自动 生成 的 。 尽 管 不 需要 自己 写 代 码 ， 但 了 解 HTML 代码 仍然 
非常 重要 ， 是 学 习 网 络 营销 与 电子 商务 的 技术 基础 知识 。 
</p> 
以 上 代码 出 现 了 两 个 p 元 素 ， 如 图 2-11 所 示 为 浏览 器 的 显示 效果 。 
ee LSU Language 的 即 超 文 本 标记 语言 。 它 是 用 于 创建 可 从 一 个 平台 移植 到 

另 一 平台 的 超 文 US KREIS. 经 常用 来 创建 Web 页 面 。HTUL 文 件 是 带 有 格式 标识 符 和 
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HTIL 是 制作 网 页 的 基础 ， 我 们 在 网 络 营销 中 讲 的 静 志 网 页 ， 就 是 以 HTIL 为 基础 制作 的 网 页 ， 

网 页 痢 是 直接 用 HTIL 代 码 编写 的 ， 不 过 现在 有 很 多 关 能 化 的 网 页 制作 软件 《比如 Dreamweaver) 通 


常 不 需要 人 工 去 写 代 码 ， 而 是 由 这 些 软件 自动 生成 的 。 ale 但 了 解 HTIL 代 码 仍 
然 非 常 重要 ， 是 学 习 网 络 营销 与 电子 商务 的 技术 基础 知识 


图 2-11 p 元 素 的 显示 效果 
p 元 素 属 于 块 级 元 素 ， 每 个 p 元 素 的 前 后 都 会 产生 一 个 换行 。 
2. 分 级 标题 
COHTML 按照 标题 的 不 同等 级 ， 提 供 了 6 个 表示 标题 (Heading) 的 元 素 : hl、h2、h3、h4、 
h5 和 h6。 在 显示 上 ， 不 同 级 别 的 标题 会 以 不 同 的 样式 显示 。 比 如 : 


<h1> 一 级 标题 </h1> 
<h2> 二 级 标题 </h2> 
<h4> 四 级 标题 </h4> 
<h6> 六 级 标题 </h6> 


在 浏览 器 中 的 显示 效果 如 图 2-12 所 示 。h1~h6 都 是 块 级 元 素 ， 每 个 标题 会 单独 占用 一 行 
的 空间 。 
一 级 标题 
二 级 标题 
四 级 标题 
*meu 
2-12 ”不同 级 别 的 标题 显示 


3. em 元 素 和 strong 元 素 


em 和 strong 元 素 都 表示 强调 (Emphasis)， 区 别 在 于 后 者 要 比 前 者 的 强调 程度 更 深 。 在 大 多 
数 浏览 器 中 ，em 元 素 中 的 文字 会 以 斜体 方式 显示 ， 而 strong 元 素 中 的 文字 会 以 粗 体 方式 显示 。 
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请 看 示例 : 
<p> 在 HTML 文档 中 ， 为 了 使 代码 清晰 ， 每 个 元 素 <em> 应 该 </em> 有 结束 标记 ， 但 这 不 是 强制 的 。 而 在 
XHTML 文档 中 ， 每 个 元 素 <strong> 必 须 </strong> 要 有 结束 标记 ， 这 是 <em><strong>XHTML 文档 
规范 要 求 </strong></em> 的 。</p> 


如 图 2-13 所 示 为 代码 的 显示 效果 。 可 见 ，em 元 素 中 的 内 容 以 斜体 显示 ，strong 元 素 中 的 
内 容 以 粗 体 显示 ， 二 者 一 起 使 用 则 以 粗 斜 体 显示 。 
在 HTIL 文 档 中 ， 为 了 使 代码 清晰， 每 个 元 素 . 沙 蕊 有 结束 标签 ， 但 这 不 是 
强制 的 。 而 在 XHT 了 LL 文档 中 ， 每 个 元 素 必 须要 有 结束 标签 ， 这 是 X57XL 
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图 2-13 显示 效果 


4. br 元 素 

网 页 中 的 文字 会 在 到 达 容 器 边缘 时 自动 产生 换行 。 但 有 时 我 们 需要 在 一 段 文 字 中 的 某 个 特 
定位 置 产生 换行 ，br 元 素 的 作用 就 在 于 此 。br 元 素 本 身 没有 内 容 ， 属 于 空 元 素 ， 在 HTML 中 
只 要 一 个 <br> 标 记 即 可 , 但 是 XHTML 要 求 这 样 的 元 素 是 自我 关闭 的 ， 因 此 需要 将 此 标记 写 
<br />。 请 看 示例 : 

<h3> 如 梦 令 </h3> 

«p» 

常 记 溪 亭 日 昔 。<br /> 


沉醉 不 知 归 路 。<br /> 
兴 尽 晚 回 舟 ， 误 入 藉 花 深 处 。<br /> 


争 渡 。<br /> 
争 渡 。<br /> 
WEM. <br /> 
</p> 
每 个 br 元 素 会 产生 一 个 换行 ， 效 果 如 图 2-14 所 示 。 
如 梦 令 
AFIS. 
沉醉 不 知 归 路 。 
兴 尽 晓 回 舟 ， 误 入 籍 花 深 处 。 
$i. 
Tute. 
图 2-14 br 元 素 会 产生 换行 
5. hr 元 素 


hr 元 素 会 在 页 面 中 画 出 一 条 水 平 线 (Horizontal Rule), 它 属 于 块 级 元 素 ,水 平 线 会 独占 一 行 。 
从 逻辑 上 讲 ，hr 元 素 将 两 个 不 同 的 区 域 分 隔 开 来 。 与 br 元 素 一 样 ，hr 元 素 也 不 包含 任何 内 容 ， 
因此 该 元 素 标记 应 写成 <hr >。 不同 浏览 器 对 hr 元 素 的 显示 有 些 差异 ,这 可 以 通过 CSS 进行 调 
整 。 请 看 示例 : 


本 行文 字 位 于 水 平 线 之 上 。 
«hr /» 


本 行文 字 位 于 水 平 线 之 下 。 
效果 如 图 2-15 所 示 。 


本 行文 字 位 于 水 平 线 之 上 。 
本 行文 字 位 于 水 平 线 之 下 。 


2-15 h 元 素 会 生成 一 条 水 平 线 


6. img 元 素 

img 元 素 用 来 向 页 面 添加 图 像 ， 它 属于 内 联 元 素 ， 元 素 前 后 不 产生 换行 。 因 此 插入 的 图 像 
可 以 和 文本 融入 在 一 起 。img 的 src 属性 指明 了 图 像 所 在 的 位 置 ， 通 常 浏览 器 可 以 显示 JPEG、 
GIF, PNG 和 BMP 格式 的 图 像 ， 显 示 效 果 由 浏览 器 决定 。 当 网 络 问题 或 者 浏览 器 支持 问题 导 
致 图 像 无 法 显示 时 , img 的 alt 元 素 可 以 在 图 像 的 位 置 显 示 一 些 文字 , 以 表示 该 图 像 的 用 途 .img 
元 素 没有 内 容 ， 在 XHTML 中 可 以 在 <img> 标 记 之 后 添加 一 个 结束 标记 </img>， 或 者 在 起 始 标 
记 中 的 最 后 添加 “/”。 请 看 示例 : 

<p> 点 击 记事 本 图 标 <img src-"images/notepad.gif" /> 可 以 启动 记事 本 程序 。</p> 

如 图 2-16 所 示 为 浏览 器 中 的 显示 效果 。 


sisse D 可 以 启动 记事 本 程序 。 
图 2-16 使 用 img 元 素 添加 图 像 

7. div 元 素 

与 前 面 介 绍 的 元 素 相 比 ，div 元 素 的 语义 性 不 是 很 强 ，div 元 素 表 示 一 个 逻辑 上 独立 的 区 域 
(Division)， 其 作用 在 于 将 相关 的 内 容 和 元 素 组 织 在 一 起 。div 元 素 通常 用 来 将 页 面 中 的 所 有 内 
容 组 织 成 一 个 个 相对 独立 的 区 域 ， 每 个 区 域 的 div 元 素 拥有 唯一 的 ID 属性 ， 以 便 使 用 CSS 或 
者 脚本 语言 对 页 面 进行 处 理 和 控制 。 比 如 某 个 网 站 的 项 部 含有 公司 标识 和 导航 菜单 ， 中 间 有 些 
新 闻 或 公司 的 介绍 ， 底 部 是 公司 的 地 址 以 及 联系 方式 ， 使 用 div 元 素 就 可 以 划分 出 这 三 个 不 同 
的 区 域 ， 比 如 : 


«!--company logo and navigation--^ 
«div id-"top"» 


«/div» 

«!--middle content--» 

«div id-"middle"» 

«/div» 

«!--address and contacts--» 


«div id-"footer"» 


«/div» 
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div 属于 块 级 元 素 ， 前 后 会 有 换行 ， 且 占 满 水 平方 向 的 空间 。div 元 素 可 以 包含 文本 和 其 他 
任何 类 型 的 元 素 。 由 于 div 元 素 本 身 没 有 很 强 的 语义 性 ， 因 此 其 内 部 的 文本 应 当 尽量 放 在 有 意 
义 的 元 素 中 。 
div 对 于 组 织 页 面 内 容 非 常 有 效 ， 但 是 也 不 能 过 分 地 使 用 它 ( 一 些 设计 者 甚至 使 用 div 来 达 
到 某 些 视觉 上 的 效果 )。 记 住 ，div 元 素 是 用 来 组 织 内 容 的 ， 而 不 是 布局 页 面 的 工具 。 在 本 书 的 
页 面 布局 部 分 还 会 讲 到 如 何 用 div 元 素 结合 CSS 对 页 面 进行 布局 。 
8. span 元 素 
span 元 素 的 作用 与 div 元 素 的 作用 相同 ， 只 不 过 span 属于 内 联 元 素 , 通常 用 来 在 一 段 文 本 
中 划分 不 同 的 区 域 ， 有 时 也 配合 CSS 来 达到 某 些 视觉 上 的 效果 。span 元 素 也 要 避免 被 滥用 ， 
当 没有 合适 的 强 语义 性 元 素 时 才 考 虑 使 用 span 元 素 。 请 看 下 例 : 

电子 邮件 : «span style="color:red;">huistd@163.com</span> 


该 代码 用 span 元 素 将 电子 邮件 地 址 划分 出 来 , 并 通过 style 属性 指定 其 中 的 文字 为 红色 。 


24.5 ”文档 树 
在 讲解 文档 树 这 个 概念 之 前 ， 我 们 先 来 看 一 段 (X)HTML 代码; 
«html» 
<head> 
<title> 文 档 树 </title> 
</head> 
<body> 
<h1> 什 么 是 文档 树 </h1> 
<p><em> 文 档 树 </em> 可 以 帮助 我 们 更 好 地 分 析 页 面 结构 。</p> 
</body> 
</html> 


这 段 代码 内 容 非常 简单 ， 它 以 标记 <html> 起 始 ， 以 标记 </html> 结 束 ， 中 间 又 包含 了 head 
和 body 两 个 元 素 ，head 包含 了 一 个 title 元 素 ，body 包含 了 一 个 hl 和 一 个 p 元 素 ， 而 p XLA 
有 一 个 em 元 素 。 

元 素 之 间 这 种 包含 与 被 包含 的 关系 可 以 看 作 是 一 种 父子 关系 ， 比 如 p 元 素 就 是 em 元 素 的 
父 元 素 (Parent Element)， 反 过 来 em 元 素 是 p 元 素 的 子 元 素 (Child Element), 再 比如 ，body 元 素 
是 hl 元 素 和 op 元 素 的 父 元 素 ; title 元 素 是 head 元 素 的 子 元 素 。 

子 元 素 可 以 称 父 元 素 以 及 包含 该 父 元 素 的 所 有 元 素 为 祖先 (Ancestor) 元 素 ， 而 父 元 素 可 以 
称 子 元 素 以 及 子 元 素 所 包含 的 所 有 元 素 为 后 代 (Descendants) 元 素 。 比 如 : html. body 和 了 元 素 
都 是 em 元 素 的 祖先 元 素 ; p 元 素 、em 元 素 都 是 body 和 html 元 素 的 后 代 元 素 。 拥 有 同一 个 父 
元 素 的 多 个 元 素 之 间 称 作 兄 弟 (Siblings) 元 素 。 比 如 ，head 和 body 就 互 为 兄弟 元 素 ， 同 样 ，hl 
Ej p 元 素 亦 为 兄弟 元 素 。 

有 了 这 些 概念 之 后 ， 我 们 就 可 以 用 一 种 类 似 于 树 形 的 结构 来 描述 这 个 文档 了 ， 树 根 就 是 文 
档 的 根 元 素 (Root Element)， 其 余 元 素 按 照 父子 顺序 依次 展开 ， 从 而 形成 一 个 树 形 结构 ,我们 把 
这 种 树 形 结构 称 作文 档 树 (Document Tree)。 以 上 代码 就 可 以 用 如 图 2-17 所 示 的 文档 树 来 描述 。 


| ERR] 
E] 
图 2-17 文档 树 结构 


25 ”编写 符合 标准 的 (X)HTML 


2.5.1 使 用 语义 化 标记 


在 第 1 章 中 曾经 说 过 ， 可 以 使 用 语义 化 的 (X)HTML 对 文档 进行 结构 化 ， 从 而 构建 符合 标 
准 的 Web 页面。 那么 如 何 创建 结构 良好 的 、 语 义 化 强 的 Web 文档 呢 ? 

(X)HTML 中 的 每 一 个 元 素 都 有 特定 的 含义 ， 在 结构 化 一 份 Web 文档 时 应 选用 与 文档 内 容 
相符 的 元 素 。 比 如 普通 段落 用 p 元 素 表 示 ， 标 题 根据 不 同 级 别 使 用 元 素 hl~h6， 新 闻 列 表 应 放 
在 二 元 素 中 等 。 避 免 文 本 直接 出 现在 body 元 素 中 或 者 div 这 种 语义 性 不 强 的 元 素 中 。 

K 2-2 总 结 了 一 些 经 常 被 忽略 但 却 非常 有 用 的 元 素 ， 使 用 这 些 元 素 可 以 提高 页 面 的 结构 化 
程度 ， 使 文档 内 容 的 用 途 更 加 明确 。 

X22 经 常 被 忽略 的 (X)HTML 元 素 


元 素 名 称 元 素 含义 
address 标记 一 段 地 址 
dl 表明 一 个 定义 列表 (通常 用 于 表示 术语 /定义 对 ， 也 可 用 来 表示 其 他 名 / 值 对 ) 
dt 表明 定义 列表 中 的 术语 部 分 
dd 表明 定义 列表 中 的 术语 定义 部 分 
code 将 文本 标记 为 代码 
blockquote. 表示 一 段 引用 (通常 表示 内 容 较 多 的 引用 ) 
q 表示 一 段 引用 (通常 表示 内 容 较 少 的 引用 ) 
label 给 表单 元 素 添加 标记 
也 标明 表格 中 行 和 列 的 表 头 
thead 表示 表格 头 部 区 域 
tfoot 表示 表格 底部 区 域 
fieldset 将 表单 元 素 成 组 
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续 表 
元 素 名 称 TRAN 
button | 创建 表单 按钮 
eis | 表示 一 段 文字 的 出 处 (通常 为 文献 、 书 籍 、 杂 志 等 的 标题 ) 
samp | 表示 程序 、 脚 本 中 的 范例 


表示 用 户 输入 的 文本 
表示 缩 略语 


表示 只 取 首 字母 的 缩写 词 


2.5.2 ”避免 使 用 具有 表现 功能 的 元 素 和 属性 


具有 表现 功能 的 元 素 没 有 任何 语义 ， 元 素 中 的 内 容 只 有 外 观 上 的 变化 。 我 们 要 避免 使 用 这 
样 的 元 素 ， 而 把 外 观 控制 权 全 部 交 给 CSS。 比 如 ，font 元 素 可 以 用 来 指定 字体 特性 ，b、i、u 
元 素 可 对 文本 进行 加 粗 、 斜 体 显示 和 添加 下 划 线 。 另 外 ， 某 些 属性 也 可 以 用 来 控制 外 观 ， 比 如 
align 属性 可 控制 元 素 的 对 齐 方式 ， 这 样 的 属性 我 们 也 要 避免 使 用 。 

除 此 之 外 ,我们 还 要 注意 不 要 误 用 元 素 。 早 期 的 浏览 器 不 支持 CSS, 一 些 设计 者 使 用 表格 
元 素 安排 内 容 的 位 置 , 通过 将 不 同 内 容 放 置 于 各 个 单元 格 中 来 达到 复杂 的 布局 效果 。 如 图 2-18 
所 示 为 使 用 表格 布局 的 示意 图 ， 我 们 看 到 页 面 中 会 出 现 大 量 嵌 套 使 用 的 表格 。 这 使 得 代码 可 读 
性 大 大 降低 、 不 利于 维护 。 


2-18 {£F table 进行 布局 和 排版 
记 住 ,COHTML 的 作用 是 表示 页 面 中 的 内 容 是 什么 ， 而 不 是 什么 样子 。 


26 小 结 


本 节 介 绍 了 有 关 (X)HTML 的 基础 知识 ， 为 后 面 学 习 CSS 做 好 准备 ， 读 者 要 想 进 一 步 学 习 
COHTML， 可 以 参考 其 他 相关 的 书籍 。 


COHTML 是 一 种 文档 标记 语言 ， 其 目的 在 于 为 纯 文 本 文档 添加 结构 和 语义 。 

COHTML 文档 由 一 个 个 元 素 组 成 ， 元 素 标 识 着 文档 内 容 的 含义 。 元 素 由 起 始 标记 、 元 素 内 
容 和 结束 标记 组 成 。 有 些 元 素 不 包含 内 容 ， 称 为 空 元 素 。 元 素 中 可 以 包含 属性 ， 用 来 提供 一 些 
附加 信息 。 属 性 由 属性 名 称 加 属性 值 组 成 。 

(X)HTML 元 素 可 分 为 两 大 类 : 块 级 元 素 和 内 联 元 素 ， 它 们 在 显示 效果 上 有 所 区 别 。 

COHTML 文档 通常 包含 文档 类 型 声明 、 文 档 头 和 文档 体 。 由 于 元 素 可 以 赃 套 出 现 ， 所 以 
COHTML 文档 可 以 使 用 一 种 树 型 结构 来 表示 ， 这 就 是 文档 树 。 

与 HTML 相 比 ，XHTML 的 语法 要 求 更 为 严格 ， 比 如 标记 、 属 性 名 等 必须 小 写 ; 属性 值 必 
须 用 双 引 号 括 起 来 ， 必 须 有 结束 标记 等 。 
应 当 使 用 (X)HTML 元 素来 结构 化 文本 信息 , 不 要 使 用 只 有 表现 功能 的 元 素 和 属性 , 表现 的 
控制 应 由 CSS 来 完成 。 

在 下 一 章 ， 我 们 将 介绍 有 关 CSS 的 一 些 基 本 概念 。 
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$33: CSS 的 基本 概念 


本 章 将 向 读者 介绍 有 关 层 又 样式 表 的 基本 概念 以 及 它 在 Web 设计 中 所 起 的 作用 、CSS H 
范 的 不 同 版 本 之 间 有 哪些 区 别 、 如 何 将 CSS 应 用 到 Web 页 面 中 、 如 何 管理 CSS。 接 下 来 我 们 
会 编写 本 书 中 的 第 一 个 CSS 样式 ， 然 后 详细 介绍 CSS 的 语法 规则 和 代码 的 编写 风格 。 
良好 的 开发 和 调试 工具 对 于 Web 开发 人 员 来 说 是 必 不 可 少 的 ， 它 直接 影响 着 开发 效率 。 
本 章 在 最 后 将 介绍 几 种 不 同类 型 的 开发 工具 ， 从 最 简单 的 文本 编辑 器 到 功能 强大 的 Web 开发 
集成 环境 ， 接 着 将 介绍 一 些 常用 的 调试 工具 ， 它 们 可 以 帮助 开发 人 员 迅 速 查看 页 面 结 构 ， 寻 找 
问题 的 根源 ， 从 而 加 快 开 发 的 速度 。 
本 章 主要 内 容 
什么 是 层 合 样式 表 、 样 式 和 层 登 的 含义 是 什么 
CSS 能 为 Web 设计 做 些 什么 
CSS 规范 版 本 的 发 展 过程 
如 何 将 CSS 应 用 到 (X)HTML 页 面 中 
如 何 组 织 好 CSS 代码 
CSS 样式 的 基本 组 成 
如 何 添加 注释 信息 
代码 风格 
常用 的 CSS 开发 工具 
常用 的 CSS 调试 工具 


3.1 什么 是 CSS 


CSS 是 英文 Cascading Style Sheet 缩写 形式 ， 中 文 译 为 层 合 样式 表 或 级 联 样式 表 。Web i 
计 者 可 利用 它 来 定义 文档 的 样式 , 这 里 指 的 文档 不 仅 限于 (X)HTML。 通过 CSS, 设计 者 可 控制 
文档 的 字体 、 颜 色 、 图 像 、 表 格 、 链 接 和 布局 格式 ， 同 时 设计 者 也 可 以 将 表示 样式 外 观 的 信息 
从 内 容 中 分 离 出 来 ， 集 中 放置 在 页 面 的 某 一 部 分 ， 甚 至 可 保存 为 独立 的 文件 ， 从 而 减少 文件 的 
大 小 、 节 省 网 络 的 带宽 、 节 约 Web 设计 者 维护 代码 的 时 间 。CSS 有 如 此 多 的 好 处 ， 掌 握 和 使 
用 好 它 对 于 Web 设计 者 来 说 是 非常 必要 的 。 


3.1.1 fA EX 


样式 一 词 对 我 们 来 说 并 不 陌生 ， 即 使 尚未 接触 CSS 的 人 也 不 难 理解 样式 的 含义 。 当 你 使 
用 Microsoft Word 一 类 的 字 处 理 程序 时 ， 几 乎 总 要 更 改 某 些 样式 以 达到 更 好 的 显示 效果 ， 比 如 
设 定 标题 为 加 粗 的 三 号 黑体 字 ， 每 一 段 的 开始 留 出 两 个 空格 等 。 样 式 表 不 能 孤立 地 使 用 ， 因 为 
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它 本 身 并 不 包含 任何 内 容 信息 。 当 然 CSS 也 不 仅仅 能 同 Web 文档 一 起 使 用 , 它 还 能 定义 XML 
甚至 软件 界面 的 样式 。 


3.42 fuAm& 


PERHE, Tf ei Css 初学 者 可 能 就 比较 少 了 ， 层 又 是 CSS 中 的 术语 ， 它 包 
含 了 一 系列 的 规则 ,浏览 器 根据 这 个 规则 来 确定 样式 应 该 如 何 应 用 到 页 面 的 各 个 元 素 中 去 。 本 
书 第 6 章 将 会 详细 介绍 层 合 概念 。 


32 CSS 的 作用 


3.2.1 排版 与 风格 设计 


(X)HTML 只 是 一 种 简单 的 结构 化 标记 语言 ， 还 不 能 够 很 灵活 地 控制 页 面 的 外 观 。 而 Css 
的 引入 ， 正 好 弥补 了 这 一 不 足 。 通 过 CSS，Web 设计 者 能 够 精确 而 灵活 地 对 页 面 进 行 排版 ， 设 
计 出 精美 的 效果 。 

使 用 Css 设计 出 来 的 网 页 究竟 是 什么 样子 的 呢 ? 我 们 从 首届 CSS 世界 大 赛 (The first CSS 
World Awards) 选 出 一 部 分 获奖 作品 供 大 家 欣赏 ， 让 读者 领略 一 下 CSS 的 魅力 。 

(1) 年 度 最 佳 站 点 (site of the year): UX Magazine(http://www.uxmag.com/)， 如 图 3-1 所 示 。 
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3-1 首届 CSS 世界 大 赛 年 度 最 佳 站 点 (UX Magzine) 


E) 
网 页 布局 开发 指南  , 


(2) 机 构 类 第 三 名 : Reductostart(http://www.reductostart.ro/)， 如 图 3-2 所 示 。 
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图 3-2 首届 CSS 世界 大 赛 机 构 类 第 三 名 (Reductostart) 


(3) 商业 类 第 一 名 : The City Church(http://www.thecity.org/))， 如 图 3-3 所 示 。 
当然 ， 要 想 设计 出 如 此 绚丽 的 页 面 ， 除 了 掌握 好 CSS， 能 编写 出 符合 规范 ， 健 壮 性 高 的 样 
式 代码 外 ， 还 需要 有 良好 的 美术 功底 和 审美 观 ， 最 重要 的 是 有 个 好 的 创意 。 
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3.2.2 简化 的 Web 开发 


在 CSS 出 现 之 前 ，Web 设计 者 全 部 使 用 (X)HTML 元 素来 控制 页 面 样式 ， 比 如 用 font 元 素 
来 设置 文字 的 颜色 、 大 小 等 

«font size-"42" face-"Arial" color="red"> 使 用 font 元 素 控制 文字 样式 。</font> 

上 面 这 段 代 码 将 字号 设置 为 +2， 字 体 为 Arial， 颜 色 为 红色 ， 尽 管 这 样 做 确实 可 以 达到 修 
改 样式 的 目的 ， 但 如 果 整 个 页 面 甚至 整个 网 站 上 所 有 文字 的 样式 都 按照 此 方法 来 设置 ， 不 仅 页 
面 会 大 量 存在 <font> 标 记 , 增加 了 文件 大 小 , 而 且 修改 和 维护 工作 的 繁重 程度 也 是 可 想 而 知 的 。 

CSS 的 出 现 消 除了 这 种 设计 方式 ， 大 大 减轻 了 代码 的 维护 工作 。 我 们 可 以 将 文字 放 在 表示 
段落 的 标记 <p> 内 : 

<p> 使 用 css 控制 文字 样式 。</p> 

然后 将 如 下 代码 放置 在 CX)HTML 页 面 的 head 元 素 中 : 


<style type="text/css"> 
pi 
font-size:x-large; 
font-family:Arial; 
color:red; 


JN 

现在 页 面 内 容 和 样式 就 彻底 分 离开 了 ， 二 者 互 不 干扰 ， 这 里 样式 信息 被 集中 放置 在 页 面 的 
首部 ， 浏 览 和 修改 起 来 都 很 方便 。 后 面 我 们 还 会 讲 到 样式 信息 可 以 单独 保存 到 独立 的 文件 中 ， 
这 样 就 可 以 完全 独立 地 添加 、 编 辑 样式 ， 而 不 会 影响 包含 内 容 的 文件 。 

著名 的 “CSS 禅 意 花园 ”网 站 (http://www.csszengarden.com) 就 通过 为 同一 个 XHTML 文档 
指定 不 同 的 样式 表 文 件 的 方式 ， 实 现 了 数 以 百 计 风 格 各 异 的 页 面 效 果 。 图 3-4 展示 了 两 位 不 同 
设计 师 的 作品 ， 而 图 3-5 则 是 除去 CSS 样式 后 的 纯 XHTML 页 面 。 
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图 3-5 除去 CSS 之 后 的 纯 XHTML 页 面 


图 3-6 展示 了 XHTML 和 CSS 文件 的 关系 ， 针 对 同一 个 XHTML 文件 应 用 不 同 的 CSS 样 
式 ， 仿 佛 为 网 页 穿 上 了 不 同 的 衣服 一 样 ， 使 其 能 够 产生 截然 不 同 的 外 观 风格 。 


相同 的 XHTML 文件 不 同 的 CSS 文 件 不 同 的 页 面 效果 


图 3-6 针对 同一 个 XHTML 文件 使 用 不 同 的 CSS 样式 ， 页 面 将 产生 不 同 的 效果 


3.8 CSS 的 起 源 及 发 展 


CSS 是 在 万 维 网 联盟 (W3C，http://www.w3.org) 的 推动 下 ， 由 Web 开发 人 员 与 浏览 器 的 开 
发 者 共同 协作 完成 的 。W3C 发 布 的 规范 (Specification) 称 作 建 议 Recommendation)。W3C 徽标 


如 图 3-7 所 示 。 
W3 RTI 
bd 
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CSS 规范 是 由 W3C I BEES TFAAR A. FH aU, 该 工作 组 已 发 布 了 两 套 完整 的 CSS 
建议 : CSS1 和 CSS2。CSS2 的 升级 版 本 CSS 2.1 的 草案 已 经 制定 ， 其 成 为 正式 建议 也 指 日 可 
待 。CSS3 还 处 于 草拟 阶段 ， 它 将 包含 更 多 的 内 容 。 


1. CSS1 


EUFESCREUN] 1(CSS Level 1， 简 称 CSS1，http://www.w3.org/TR/REC-CSS1) 规 范 作 为 
W3C 的 建议 于 1996 年 12 H 17 日 发 布 ， 并 于 1999 4E 1 月 11 日 发 布 修订 版 。 

CSS1 定义 了 各 种 各 样 的 样式 (比如 字体 、 颜 色 等 )， 并 将 其 应 用 到 COHTML 文档 中 。 但 是 
与 CSS2 相 比 ，CSS1 提供 的 样式 和 功能 还 是 非常 有 限 的 。 

2.CSS2 


CSS2(CSS Level 2) 发 布 于 1998 年 5 月 12 H (http://www.w3.org/TR/REC-CSS2), 它 在 CSS1 
的 基础 上 扩展 了 许多 功能 ， 比 如 增加 了 新 的 选择 符 、 伪 类 和 伪 元 素 ， 改 进 了 文本 和 字体 的 属性 
等 。CSS2 使 得 Web 设计 者 不 仅 能 为 (X)HTML 创建 样式 ， 还 能 为 其 他 类 型 的 结构 化 文档 (比如 
XML) 和 特定 设备 (比如 打印 机 、 语 音 设 备 ) 创 建 样式 。CSS2 有 效 地 区 分 了 文档 内 容 和 其 表现 ， 
简化 了 Web 开发 过 程 。 

3.CSS 2.1 


W3C F 2002 4F 8 H2 H £H T CSS 2.1(CSS Level 2 Revision 1, http://www.w3.org/TR/CSS21) 
工作 草案 (Working Drafb)。 目 前 它 已 经 成 为 候选 建议 (Candidate Recommendation), 724i AWA 
2007 年 7 月 19 日 。 CSS 2.1 修正 了 CSS2 中 存在 的 几 处 错误 , 增加 了 一 些 得 到 广泛 支持 的 属性 。 
尽管 CSS 2.1 目前 尚未 成 为 W3C 正式 建议 ， 但 已 经 成 为 事实 上 的 标准 。 大 多 数 浏览 器 都 
能 支持 CSS 2.1 版 本 的 样式 ， 大 多 数 Web 设计 者 也 都 按照 CSS 2.1 编写 样式 。 因 此 ， 本 书 内 容 
也 以 CSS 2.1 为 依据 。 
4. CSS3 


与 此 前 的 CSS 规范 不 同 , CSS3(http:/www.w3.org/TR/css3-roadmap) 规 范 不 再 由 单一 的 文档 
发 布 ， 而 是 按照 不 同 模块 独立 发 布 的 。 这 样 有 利于 理 清 各 部 分 之 间 的 联系 ,减少 整个 文档 的 大 
小 。 各 个 模块 可 独立 进行 测试 和 更 新 ， 使 用 起 来 更 为 灵活 。CSS3 将 支持 国际 性 语言 ， 支 持 使 
用 可 下 载 的 字体 ， 支 持 和 SVG、MathML 和 SMIL 的 整合 。CSS3 还 会 通过 CSS 行为 扩展 
(Behavioral Extensions to CSS) 实 现 (X)HTML、 样 式 表 和 脚本 语言 之 间 的 进一步 整合 。 

目前 CSS3 的 一 部 分 模块 的 规范 还 处 于 工作 草案 阶段 ， 另 一 部 分 已 经 成 为 候选 建议 。 


3.4 应 用 到 Web nE 


我 们 已 经 介绍 了 COHTML 和 CSS 的 一 些 基 本 概念 ， 那 么 怎么 将 CSS 应 用 到 COHTML 页 
面 当 中 呢 ? 这 就 是 本 节 所 要 解决 的 问题 。 将 CSS 应 用 到 Web 页 面 的 方式 有 很 多 种 ， 至 于 选用 
哪 一 种 ， 要 根据 具体 情况 而 定 。 


3.4.1 内 联 样式 


内 联 样式 (Inline Style) 通 过 (X)HTML 元 素 的 style 属性 为 元 素 直 接 添加 样式 信息 。style 属 
性 的 内 容 是 由 CSS 属性 加 属性 值 组 成 ， 例 如 : 
«p style="color:red;"> 这 段 文 字 显示 为 红色 。</p> 


将 p 元 素 内 的 文字 颜色 设 为 红色 。style 属性 是 (X)HTML 的 核心 属性 之 一 ,每 一 个 (X)HTML 
元 素 都 支持 使 用 style 属性 。 当 你 想 快速 验证 某 些 样式 的 效果 时 ， 使 用 内 联 样式 会 很 方便 。 但 
这 种 方式 也 存在 很 多 问题 。CSS 的 初衷 是 要 将 页 面 的 内 容 和 表现 进行 有 效 的 分 离 ， 但 使 用 内 联 
样式 则 会 违背 这 一 原则 。 假 如 页 面 中 多 个 p 元 素 都 要 求 使 用 红色 文字 ， 这 就 需要 在 每 个 p 元 素 
的 style 属性 中 声明 “colorred”， 这 将 导致 页 面 中 到 处 都 存在 着 重复 的 样式 定义 ， 维 护 起 来 非 
常 不 便 ， 因 此 在 实际 开发 中 很 少 使 用 。 


3.4.2 BAR 


IKA FEsX (Embedded Style) 的 内 容 仍然 和 (CX)HTML 内 容 写 在 一 起 ， 但 是 与 内 联 样式 不 同 ， 
嵌入 样式 的 所 有 样式 属性 都 被 包含 在 一 个 单独 的 style 元 素 中 ， 该 元 素 位 于 (X)HTML 的 head 
元 素 中 。 请 看 下 面 这 段 代码 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 

<html xmlns-"http://www.w3.0rg/1999/xhtml"» 

<head> 

«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312" /> 

«title» A FESURBIC/title» 

«style type="text/css"> 

pt 

color:red; 

) 

</style> 

</head> 

<body> 

<p> 这 段 文字 显示 为 红色 。</p> 

</body> 

</html> 


把 这 段 代码 保存 为 embedded.html 并 在 浏览 器 中 打开 , 可 以 看 到 段落 内 的 文字 显示 为 红色 。 

嵌入 样式 的 使 用 频率 要 比 内 联 样式 要 高 ， 这 种 方式 使 得 样式 信息 能 够 集中 在 一 起 ,在 一 定 
程度 上 减少 了 宛 余 的 样式 信息 ， 方 便 代码 的 修改 和 维护 。 嵌 入 样式 固然 要 嵌入 到 (X)HTML 页 
面 中 ， 所 以 每 次 载 入 (X)HTML 时 样式 信息 也 要 跟着 载 入 。 另 外 ， 若 多 个 页 面 的 样式 相同 ， 也 
需要 重复 地 在 每 个 页 面 都 包含 一 段 相 同 的 样式 代码 ， 代 码 元 余 问题 还 是 存在 。 由 于 每 个 页 面 都 
含有 样式 信息 ， 维 护 代码 的 工作 量 也 会 很 大 。 
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3.4.3 外 部 样式 


外 部 样式 (External Style) 实 现 了 样式 信息 和 内 容 信息 的 完全 分 离 ，CSS 样式 作为 独立 的 文 
件 存在 ， 多 个 页 面 可 以 使 用 同一 个 样式 表 文件 。 请 看 下 面 的 示例 。 
首先 建立 external.css 文件 ， 文 件 内 容 如 下 : 


p {color:red;} 
将 该 文件 和 下 面 的 XHTML 文档 放 在 同一 目录 下 ，XHTML 代码 如 下 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 
<html xmlns-"http://www.w3.0rg/1999/xhtml"» 
<head> 
«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312" /> 
«title» A FESUR BI / title» 
<link rel="stylesheet" type="text/css" href-"external.css" /> 
</head> 
<body> 
<p> 这 段 文 字 显示 为 红色 。</p> 
</body> 
</html> 
把 它 保存 为 exteranl.html， 并 在 浏览 器 中 打开 ,文字 颜色 仍 是 红色 。 这 段 (X)HTML 代码 不 
再 包含 任何 样式 信息 了 ， 它 只 负责 放置 内 容 ， 样 式 信息 都 在 外 部 样式 文件 中 。 使 用 CX)HTML 
代码 <link rel-"stylesheet" type=“text/css” href=“external.css” />KFÉIRK external.css 与 当前 文档 
关联 起 来 ， 其 中 rel 属性 为 stylesheet， 表 明 外 部 文件 是 该 文件 的 样式 表 ，type 为 textcss， 表 明 
是 CSS 类 型 ，href 指定 了 外 部 样式 表 文 件 的 位 置 。 通 过 这 种 方式 ， 可 以 将 该 样式 表 应 用 到 多 个 
(X)HTML 页 面 ， 而 样式 信息 是 唯一 的 ， 这 就 是 外 部 样式 的 最 大 优势 。 同 时 ， 一 个 页 面 也 可 以 
添加 多 个 link 元 素来 引用 多 个 样式 表 文 件 。 另 外 ， 一 旦 浏览 器 下 载 了 样式 表 文 件 ， 会 把 它们 组 
存 起 来 而 不 必 重 新 下 载 ， 因 而 可 以 节省 带宽 ， 加 快 网 页 的 载 入 速度 。 
Q) 延伸 : 当 link 元 素 的 tel 属性 为 “altemate stylesheet” 时 ， 该 元 素 所 指向 的 样式 表 文 件 可 
作为 页 面 的 一 个 可 选 样式 , 默认 情况 下 浏览 器 不 会 应 用 该 样式 。 在 Firefox. Opera 
等 浏览 器 中 ， 可 以 通过 菜单 中 的 相关 选项 选择 这 些 可 选 样式 ， 样 式 的 名 称 由 link 
元 素 的 title 属性 确定 。 遗 憾 的 是 ,IE 浏览 器 没有 提供 此 功能 ， 因 此 只 能 依靠 脚本 
代码 等 其 他 方式 进行 选择 。 
到 此 为 止 ， 我 们 学 习 了 三 种 将 样式 表 应 用 到 (CX)HTML 页 面 的 方式 ， 它 们 是 内 联 样式 、 妊 
入 样式 和 外 部 样式 ， 其 中 外 部 样式 的 使 用 频率 较 高 ， 它 充分 地 实现 了 样式 和 内 容 的 分 离 。 若 样 
式 具 有 页 面 唯一 性 ， 则 也 可 以 使 用 嵌入 样式 。 若 想 快速 验证 某 些 样式 的 效果 ， 临 时 使 用 内 联 样 
式 也 是 可 以 的 。 还 有 一 种 方式 可 以 将 外 部 样式 表 文 件 导入 进来 ， 这 种 方式 是 CSS 自 有 的 功能 ， 
我 们 在 后 续 章 节 中 进行 介绍 。 


N 


3.5 管理 CSS 


前 一 节 介绍 了 3 种 将 CSS 应 用 到 Web 页面 的 方法 ,实际 上 只 有 外 部 样式 才能 充分 发 挥 CSS 
的 优势 。 一 般 的 大 中 型 网 站 会 包含 成 千 上 万 个 页 面 ,使 用 外 部 样式 就 可 以 通过 一 个 或 几 个 CSS 
文件 为 整个 网 站 添加 样式 。 下 面 我 们 就 来 讨论 一 下 如 何 组 织 和 管理 这 些 CSS 文件 。 

最 简单 的 组 织 方式 就 是 所 有 页 面 共用 一 个 CSS 文件 ， 这 也 仅仅 适用 于 页 面 数量 较 少 、 页 
面 样式 单一 的 网 站 。 假 如 页 面 数量 过 多 且 样 式 布局 各 异 ， 此 时 的 样式 表 文 件 可 能 会 包含 上 千 行 
的 代码 ， 文 件 也 会 随 之 增 大 。 这 样 的 样式 表 对 于 开发 人 员 来 说 是 难以 维护 的 ， 同 时 ， 即 使 用 户 
浏览 一 个 页 面 也 要 下 载 这 个 “庞大 ”的 CSS 文件 ， 影 响 了 页 面 加 载 速度 ， 也 会 增加 网 络 流量 。 

为 了 避免 使 用 单一 样式 表 所 带 来 的 负面 影响 ， 我 们 可 以 将 CSS 代码 模块 化 ， 分 别 存放 在 
不 同 的 样式 表 文 件 中 。 一 种 可 行 的 方案 是 按照 CSS 的 用 途 进 行 划分 ， 比 如 将 控制 页 面 布局 结 
构 的 代码 存放 在 layout.ess 中 ， 将 控制 文本 格式 的 代码 存放 在 text.css 中 。 这 样 可 以 有 效 提 高 代 
码 的 可 维护 性 ， 但 还 是 不 能 减少 访问 者 的 下 载 量 。 另 一 种 方案 是 按照 CSS 所 属 的 页 面 进行 划 
分 ， 比 如 首页 采用 index.css， 产 品 介绍 页 面 使 用 product.css。 这 样 ， 样 式 表 文 档 相 互 独立 ， 能 
够 有 效 地 加 快 页 面 的 下 载 速度 。 


3.6 ”编写 第 一 个 CSS 样式 


3.6.1 增加 样式 


我 们 使 用 第 2 章 编写 的 第 一 个 HTML 文档 ， 为 它 增加 文档 类 型 声明 ， 使 其 转换 成 为 一 个 
符合 XHTML 1.0 过 渡 型 规范 的 XHTML 文档 。 在 文档 头 部 区 域 添加 一 个 link 元 素 ， 引 用 一 个 
名 为 first.css 的 外 部 CSS 文件 。 修 改 后 的 文件 内 容 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 

<html xmlns-"http://www.w3.0rg/1999/xhtml"» 

<head> 

«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312" /> 

<link type="text/css" rel="stylesheet" href-"first.css" /> 

<title> 第 一 个 Web 页 面 </title> 

</head> 


<body> 
<hl>Hello, XHTML and CSS!«/hl» 
</body> 
</html> 


把 它 保存 为 first-html-with-css.html。 
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再 次 打开 编辑 器 ， 在 新 建 的 文档 中 输入 以 下 内 容 : 


body{ 
background-color:gray; 
text-align:center; 
$ 
hlí( 
font-family:"Times New Roman", Times, serif; 
font-size:30px; 
color:white; 


) 


把 它 保存 为 frstcss， 注 意 first.css 和 前 面 的 first-html-with-css.html 要 处 于 同一 目录 中 。 用 
浏览 器 打开 first-html-with-css.html 文档 ， 会 产生 如 图 3-8 所 示 的 效果 。 
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Hello, XHTML and CSS! 


3-8 增加 CSS 样式 


除了 在 原 有 的 HTML 文档 之 中 增加 一 个 文档 类 型 声明 和 一 个 link 元 素 之 外 ， 文 档 主体 区 
域 没有 增加 任何 内 容 。 外 部 的 CSS 文档 使 得 页 面 的 显示 效果 与 第 2 章 的 图 2-2 有 了 区 别 。 对 于 
first.css 文件 中 各 部 分 的 含义 ， 读 者 可 暂时 不 必 理 会 ， 这 里 只 是 让 读者 了 解 一 下 CSS 样式 的 编 
写 过程 ， 以 及 如 何 应 用 到 一 个 Web 页 面 中 。 


3.6.2 ”本 书 约定 


以 下 几 点 是 本 书 的 一 些 约定 ， 请 读者 在 阅读 本 书 和 实际 练习 中 注意 : 

e ”除非 做 特殊 说 明 ， 本 书 出 现 的 CSS 代码 均 符 合 CSS 2.1 规范 。 

e ”本 书 示例 全 部 采用 XHTML。 限 于 篇 幅 ， 大 部 分 示例 只 给 出 body 元 素 之 中 的 代码 片 
Bt, 我 们 省 去 了 文档 类 型 声明 、 文 档 头 部 和 <body> 标 记 。 读 者 在 实际 编写 时 应 该 使 用 
完整 的 XHTML 代码 结构 ， 并 添加 XHTML 1.0 过 渡 型 的 文档 类 型 声明 ， 设 置 文档 字 
符 集 为 gb2312， 即 简体 中 文 (这 些 都 是 本 书 示例 实际 所 采用 的 )。 代 码 中 的 重复 部 分 将 
以 省 略 号 表示 。 当 然 ， 示 例 也 同样 适用 于 HTML. 

© 本 书 所 列举 的 CSS 代码 片段 均 可 放置 在 位 于 XHTML 文档 头 部 的 style 元 素 中 , H style 
元 素 需 要 添加 属性 type="“text/ess”*"。 也 可 将 其 单独 保存 为 样式 文档 ， 并 用 link 元 素 进 
行 引用 。 建 议 读者 在 学 习 过 程 中 采用 第 一 种 方式 。 


e ”除非 做 特殊 说 明 ， 本 书 所 有 示例 可 以 保证 对 Windows 平台 下 的 IE6. IE7 和 Firefox2 
浏览 器 的 兼容 性 ， 并 使 用 TEG 演示 页 面 效果 。 

e ”除非 做 特殊 说 明 ， 本 书 不 区 分 HTML 和 XHTML， 并 统称 为 (X)HTML。 

例如 书 中 出 现 以 下 代码 ( 取 自 第 12 章 ，12.2.2 小 节 ): 


ult 
list-style-image:url(images/list.gif); 


} 


«h32CSS 中 列表 样式 属性 </h3> 
<ul> 
«li»list-style-typec/li» 
«li»list-style-image«/li» 
«li»list-style-position«c/li» 
Xli»list-style«/li» 
</ul> 
则 它 的 完整 形式 为 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 
<html xmlns-"http://www.w3.org/1999/xhtml"» 
<head> 
«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312" /> 
«title»Untitled Document«/title» 
«style type="text/css"> 
ul( 
list-style-image:url(images/list.gif); 
) 
</style> 
</head> 


<body> 

«h3»CSS 中 列表 样式 属性 </h3> 

<ul> 
Xli»list-style-type«/li» 
«li»list-style-imagec/li» 
Xli»list-style-position«/li» 
<li>list-style</li> 

</ul> 

</body> 

</html> 


3.7 CSS 规则 详解 


CSS 规则 组 成 了 样式 表 的 基本 内 容 ， 每 一 条 规则 定义 了 一 系列 样式 以 及 该 样式 的 使 用 
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CSS 规则 由 一 个 选择 符 (Selector) 和 一 段 声 明 块 (Declaration Block) 组 成 ， 声 明 部 分 用 一 对 大 
括号 包括 起 来 ， 中 间 包 含 0 个 或 多 个 声明 (Declarations)， 每 个 声明 之 间 用 分 号 “;” 隔 开 。 每 一 
条 声明 是 由 一 个 属性 (Property) 加 属性 值 (Value) 组 成 ， 二 者 用 冒号 “:” 隔 开 。 

一 般 来 说 ， 一 条 CSS 规则 会 有 如 下 形式 : 

选择 符 {属性 : 值 ; 属性 : 值 ; ...) 

其 中 ， 选 择 符 表明 该 条 规则 应 用 到 页 面 的 哪个 部 分 。 选 择 符 的 内 容 可 以 是 (X)HTML 元 素 
名 称 , 这 是 形式 最 简单 的 选择 符 , 如 果 需 要 进行 更 精确 的 选择 , 就 要 在 选择 符 中 增添 附加 条 件 。 
CSS 规范 中 定义 了 多 种 类 型 的 选择 符 , 但 是 不 同 浏览 器 对 它 的 支持 也 不 尽 相同 , 我 们 在 下 一 章 
将 会 详细 地 介绍 。 

属性 名 是 由 CSS 规范 定义 的 ， 不 同 的 属性 定义 了 丰富 多 彩 的 页 面 样式 和 效果 ， 比 如 背景 
颜色 、 高 度 、 字 体 等 。 属 性 值 是 一 个 关键 字 ， 或 者 是 由 空白 分 隔 的 多 个 关键 字 ， 它 定义 了 如 何 
设置 属性 ， 比 如 把 背景 色 设 为 绿色 、 把 某 个 div 元 素 的 宽度 设 为 100 个 像素 、 把 正文 文字 设 为 
宋体 等 。 

下 面 定 义 一 条 非常 简单 的 规则 : 


hl {color:blue;} 


它 的 各 部 分 含义 如 图 3-9 所 示 。hl 是 选择 符 ， 它 选择 页 面 中 所 有 的 hl 元 素 ， 大 括号 之 间 
的 声明 部 分 只 包含 一 条 声明 语句 ， 其 中 属性 名 称 是 color， 表 示 文 字 颜 色 ， 属 性 值 是 blue， 即 
让 文字 颜色 变 为 蓝 色 。 整 条 规则 的 含义 就 是 让 CXJHTML 中 <h1l> 标 记 内 的 文字 显示 为 蓝 色 。 


CSS 规 则 
选择 符 声明 块 


hl (color:blue;]) 


3-9 CSS 规则 示意 图 


3.8 注释 和 风格 


3.8.1 代码 注释 


如 果 你 是 一 位 程序 开发 人 员 ， 那 么 注释 对 于 你 来 说 最 熟悉 不 过 了 。 与 其 他 语言 一 样 ，CSS 
允许 开发 者 在 代码 中 添加 注释 。 浏 览 器 在 解释 CSS 的 过 程 中 会 完全 忽略 掉 注释 内 容 。 注 释 作 
为 一 种 在 代码 中 添加 说 明 的 方式 ， 提 高 了 代码 的 可 读 性 和 易 维 护 性 ， 有 利于 其 他 开发 人 员 了 解 
样式 定义 的 用 意 。 


CSS 注释 以 “/*” 开 始 ， 以 “*/” 结 束 。 注 释 可 出 现在 任何 地 方 ， 但 注释 不 能 嵌 套 使 用 。 

大 中 型 网 站 的 CSS 样式 定义 往往 是 异常 复杂 的 ， 添 加 适当 的 注释 信息 可 以 增强 代码 的 可 
读 性 ， 方 便 其 他 开发 者 进行 维护 。CSS 中 常见 的 注释 方式 有 以 下 几 种 。 

1. 位 于 文件 首部 的 注释 信息 


位 于 文件 首部 的 注释 信息 可 以 包含 文档 的 创建 日 期 , 作者， 项目 信息 ， 附 加 说 明 等 。 当 然 ， 
如 果 一 个 文件 中 包含 了 多 个 人 编写 的 代码 ， 那 么 也 可 以 在 代码 中 间 的 分 隔 处 添加 类 似 的 信息 。 
下 面 是 一 个 文件 头 部 注释 的 例子 : 

J[RCCCICRoe deed oed doo deed ojo oed dee eee eee eee ee 


* Created date: 22 Sept 2007 


Author: Jia Zheng 
Project: Layout (Hui Blog) 
Notes: 


Copyright (c) Hui Studio 2006. All Rights Reserved. 

Not to be reused without permission. 

http: //www.huistd.com 
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2. 位 于 CSS 规则 前 的 注释 信息 
在 编写 样式 表 时 ， 通 常 需要 大 量 代 码 来 实现 页 面 某 一 局 部 的 样式 ， 比 如 导航 菜单 。 那 么 可 
以 在 控制 导航 菜单 的 一 系列 样式 规则 前 加 上 一 段 说 明 信 息 ， 表 示 下 面 样式 的 具体 用 途 。 说 明 信 
息 的 语言 依 开发 团队 的 约定 和 习惯 而 定 。 比 如 : 
/* Styles for top menu */ 
*top menu ( 
font-family: Tahoma, sans-serif; 
color: white; 
background-color: black 
) 
#top menu a ( 
font-size: 10px; 
color: #003399; 
line-height: .82em; 
text-decoration: none; 


有 时 为 了 使 代码 结构 更 加 清晰 , 也 可 在 一 系列 的 样式 末尾 添加 一 个 表示 结束 的 说 明 , 比如 : 
/* End of styles for top menu */ 
3. 位 于 声明 之 后 的 注释 信息 


于 CSS 的 样式 声明 本 身 就 具有 良好 的 自 说 明 性 ， 所 以 大 多 数 情 况 下 不 用 写 任何 注释 就 
可 以 看 懂 声 明 的 含义 。 但 有 时 ， 声 明 内 容 不 容易 反映 出 开发 者 的 意图 ,或 者 开发 者 要 强调 某 些 
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内 容 ， 这 时 就 需要 在 声明 后 添加 注释 。 

由 于 不 同 的 浏览 器 甚至 同一 浏览 器 的 不 同 版 本 对 CSS 的 支持 程度 存在 差异 ， 所 以 有 些 样 
式 声明 可 能 只 在 某 一 特定 版 本 的 浏览 器 中 有 效果 。 这 时 在 声明 之 后 加 上 一 条 注释 可 以 说 明 设 计 
者 的 意图 。 下 面 这 段 CSS 规则 的 最 后 一 条 声明 就 被 标注 了 这 样 的 注释 : 


p.newest{ 
padding:0; 
margin:0; 
float:left; 
border:lpx solid #c2c2d5; 
line-height:20px; 
width:158px; 
height:125px; 
opacity:0.8; /* for Firefox */ 


} 


- 些 计算 机 用 户 会 更 改 系 统 外 观 ， 使 得 浏览 器 默认 的 背景 颜色 不 再 是 白色 。 为 了 提高 页 面 
显示 效果 的 健壮 性 ， 设 计 人 员 会 在 body 元 素 里 加 上 一 句 设置 背景 色 为 白色 的 声明 。 在 其 他 人 
看 来 这 条 声明 可 能 是 多 余 的 ， 他 们 没有 意识 到 用 户 系 统 外 观 更 改 的 问题 ， 样 式 编写 者 可 以 添加 

-条 注释 来 说 明 这 个 问题 。 

4. 用 于 调试 的 注释 

在 调试 样式 表 时 ， 你 可 能 想 要 和 暂时 取消 某 个 声明 ， 然 后 看 看 页 面 效果 。 可 以 用 注释 符号 将 
其 括 起 来 ， 浏 览 器 会 包 略 注释 内 容 ， 该 声明 当然 也 就 不 会 应 用 到 当前 页 面 上 ， 若 想 恢 复 ， 只 需 
去 掉 注释 即 可 。 这 是 开发 样式 表 的 过 程 中 很 常用 的 技巧 。 


3.8.2 ”代码 风格 


设计 Web 页 面 可 以 说 是 一 门 艺术 ， 编 写 CSS 样式 也 不 例外 ， 除 了 保证 样式 代码 的 正确 性 
外 ， 良 好 的 代码 风格 也 是 很 有 必要 的 。 为 了 使 CSS 代码 便于 阅读 和 维护 ， 可 以 适当 添加 一 些 
空格 、 换 行 或 缩 进 。 与 (X)HTML 一 样 ， 浏 览 器 在 解释 CSS 的 时 候 也 会 忽略 其 中 的 空白 ,包括 
空格 符 、 换 行 符 和 制 表 符 (Tab f). 

-种 常见 的 风格 是 将 一 条 规则 的 内 容 全 部 写 在 一 行 ， 例 如 : 

body {margin:0;padding:0;font-size:12px;} 

该 规则 中 出 现 了 三 条 声明 语句 ， 全 部 写 在 一 行 中 。 

男 一 种 常见 的 风格 是 每 条 声明 占用 一 行 ， 并 采用 缩 进 形式 ， 左 括号 和 选择 符 在 同一 行 ， 右 
括号 单 占 一 行 。 例 如 上 面 的 规则 可 以 写成 如 下 风格 : 


body( 
margin:0; 
padding:0; 
font-size:12px; 
} 


本 书 中 大 部 分 的 示例 会 采用 第 二 种 代码 风格 。 另 外 ， 规 则 之 间 也 可 以 适当 添加 空 行 ， 使 代 
码 更 容易 阅读 。 结 合 自己 的 习惯 ， 以 上 这 两 种 风格 都 可 以 使 用 。 你 可 以 确定 自己 的 风格 ， 一 旦 
确定 下 来 ， 就 该 使 整个 项 目的 代码 风格 保持 一 致 。 


3.9 工具 的 重要 性 


《论语 》 里 提 到 “ 工 欲 善 其 事 ， 必 先 利 其 器 ”， 就 是 说 要 做 好 工作 ， 先 要 使 工具 锋利 。 开 
发 CSS 样式 表 文 档 也 是 如 此 ， 一 款 良 好 的 开发 工具 可 以 帮助 Web 设计 人 员 提 高 编写 样式 代码 
的 速度 ， 增 加 效率 。 再 配合 一 些 辅助 工具 ， 可 以 达到 事半功倍 的 效果 。 


3.9.1 开发 工具 


CSS 文档 是 普通 的 文本 文档 ， 设 计 人 员 可 以 使 用 多 种 程序 来 创建 样式 表 ， 从 简单 的 文本 编 
辑 器 到 各 种 专门 的 开发 设计 工具 。 只 要 能 创建 和 编辑 文本 文档 的 程序 就 能 用 来 编写 样式 表 。 

目前 也 有 一 些 专门 的 软件 工具 ， 它 们 提供 了 一 些 更 为 高 级 的 功能 ， 能 实现 可 视 化 设计 。 文 
本 编辑 器 、CSS 编辑 器 和 Web 开发 工具 是 常见 的 三 类 开发 工具 ， 建 议 初学 CSS 的 读者 从 简单 
的 工具 开始 ， 使 用 文本 编辑 器 编写 代码 ， 这 样 能 帮助 你 尽快 掌握 CSS 的 全 部 基础 知识 。 

1. 文本 编辑 器 

CSS 文档 是 基本 的 文本 文档 , 文本 编辑 器 只 生成 不 含 任何 格式 信息 的 纯 文本 信息 ， 因 此 可 
使 用 文本 编辑 器 创建 和 编辑 CSS 文档 。 文 本 编辑 器 很 容易 找到 ， 每 种 操作 系统 都 会 附带 基本 
的 文本 编辑 器 。 常 见 的 文本 编辑 器 包括 Windows 的 记事 本 、Linux gk Unix 的 vi 或 emacs、 其 
他 一 些 文本 编辑 器 (UltraEdit、EditPlus)。 如 图 3-10 所 示 为 使 用 Windows 的 记事 本 编辑 样式 表 。 


eft; 
background 4esgezerlC. . Ansges/top. gellow.gi): 
background-repeat: no-rep 
Mackirouné-paritien: left tap; 


magezurl(../inages/top blue.git); 


our 
background-repeat: no-repeat; 
background-position: left top; 


3-10 ”使 用 Windows 的 记事 本 编辑 样式 表 文 档 
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Q 注意 : 可 以 使 用 Windows 的 写字 板 或 Microsoft Word 之 类 的 字 处 理 程序 来 编辑 CSS, 


但 切记 要 将 文件 保存 为 不 附带 任何 特殊 格式 的 文本 文档 。 


2. CSS 编辑 器 


CSS 编辑 器 是 专 为 编辑 样式 表 而 开发 的 软件 工具 。 这 些 工具 具有 一 些 高 级 特性 ， 比 如 彩色 
显示 样式 规则 、 属 性 /语法 检查 、 可 视 化 设计 等 。 建 议 专业 的 样式 表 设 计 人 员 使 用 这 类 工具 ， 
它们 可 以 减少 编写 代码 的 工作 ， 帮 助 提高 开发 效率 。 


见 的 CSS 编辑 器 列举 如 下 。 


TopStyle， 网 址 : http://www.newsgator.com/Individuals/TopStyle/Default.aspx 
Rapid CSS Editor， 网 址 : http://www.blumentals.net/rapidcss/ 

JustStyle CSS Editor， 网 址 : http://www.ucware.com/juststyle/ 

Style Master, Hk: http://www.westciv.com/style_master/ 


如 图 3-11 所 示 为 使 用 TopStyle 编辑 样式 表 , 它 可 帮助 样式 表 设 计 人 员 编 写 符合 包括 CSS2 
等 标准 的 样式 表 。 其 CSS 定义 选择 功能 可 以 选取 特定 的 浏览 器 或 CSS 规范 ， 此 外 它 还 包括 样 
式 表 检查 器 、 彩 色 标 识 代码 ， 以 及 样式 预览 等 功能 。 
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3-11 使 用 TopStyle 编辑 样式 表 文档 


3. Web 开发 工具 
CSS 和 Web 设计 是 密 不 可 分 的 ， 因 此 一 般 大 型 的 Web 开发 工具 也 会 带 有 CSS 编辑 功能 。 
- 些 可 视 化 编辑 器 还 可 为 设计 者 自动 创建 样式 表 , 或 者 只 需要 输入 相应 的 属性 值 即 可 ， 而 源 代 
码 编 辑 器 也 能 让 设计 者 直接 编辑 样式 表 。 


eM 


常见 的 Web 开发 工具 包括 : 
* Adobe 的 Dreamweaver。 网 址 : 


http://www.adobe.com/cn/products/dreamweaver/ 


Microsoft 的 Expression Web。 网 址 : 
http://www.microsoft.com/china/expression/expression-web/default.mspx/ 

Dreamweaver( 见 图 3-12) 可 谓 是 一 款 功 能 强大 Web 开发 工具 ， 可 快速 、 轻 松 地 完成 设计 、 
开发 和 维护 网 站 和 Web 应 用 程序 的 工作 。Dreamweaver 可 以 与 Adobe 家 族 的 其 他 产品 完美 地 
配合 起 来 使 用 。 


3-12 Adobe Dreamweaver CS3 产品 


Dreamweaver 是 为 设计 人 员 和 开发 人 员 而 构建 的 ， 既 可 以 在 直观 的 可 视 布局 界面 中 工作 ， 
也 可 以 在 简化 的 编码 环境 中 工作 。 如 图 3-13 所 示 为 使 用 Dreamweaver CS3 编辑 样式 表 文 件 。 
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3-13 ”使 用 Adobe Dreamweaver CS3 编辑 样式 表 
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除了 直接 编辑 CSS 代码 文件 以 外 ，Dreamweaver 还 提供 了 另 一 种 方式 来 创建 和 编辑 样式 ， 
如 图 3-14 所 示 为 该 软件 提供 的 样式 创建 和 编辑 窗口 ， 只 需要 直接 输入 对 应 样式 的 属性 值 即 可 


完成 代码 的 编写 工作 。 
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3-14 Dreamweaver 提供 的 CSS 样式 创建 和 编辑 窗口 
微软 公司 的 推出 的 Expression Web 也 是 一 款 功 能 强大 的 Web 开发 工具 ( 见 图 3-15)。 是 微软 
Expression Studio 的 产品 之 一 。 


Ww 


3-15 Microsoft Expression Web 产品 
该 产品 取代 了 微软 的 前 一 代 网 页 制作 工具 FrontPage. fir Visual Studio 开发 环境 ，Web 
设计 人 员 和 后 台 开 发 人 员 可 顺利 地 进行 协同 工作 ,使 用 强大 的 接口 工具 可 直接 处 理 位 置 、 缩 放 、 
边界 和 填补 。 样 式 应 用 可 精确 地 控制 CSS 样式 的 产生 方式 ， 以 及 产生 于 何 处 ， 并 使 用 样式 产 
生 器 来 进行 完善 的 样式 设计 和 有 效率 的 样式 编辑 。 
如 图 3-16 所 示 为 Expression Web 的 界面 ， 通 过 CSS 属性 窗口 可 编辑 属性 值 ， 样 式 管理 窗 
列 出 所 有 选择 符 ， 单 击 后 可 以 预览 样式 效果 。 
如 图 3-17 所 示 为 添加 新 样式 的 界面 ， 你 可 以 确定 选择 符 、 样 式 生成 的 位 置 ， 编 辑 样式 属 
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图 3-17 Expression Web 添加 新 样式 的 界面 


3.92 ”辅助 工具 


想 要 一 次 编写 出 正确 的 样式 代码 几乎 是 不 可 能 的 , 你 需要 不 断 地 在 不 同 版 本 的 浏览 器 中 验 
证 效果 。 当 页 面 元 素 过 多 、 样 式 表 过 于 复杂 的 时 候 ， 你 很 难 发 现 错误 所 在 。 借 助 于 一 些 辅助 工 
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具 ， 你 可 以 全 面 深入 分 析 页 面 结构 、 快 速 定 位 错误 。 下 面 介 绍 一 些 常用 的 辅助 工具 。 


1. IE Developer Toolbar 
Internet Explorer Developer Toolbar 是 由 微软 公司 发 布 的 基于 TE 的 开发 辅助 工具 。 它 让 开 


发 人 员 能 够 深入 探索 和 理解 页 面 ， 帮 助 开 发 者 更 好 地 创建 Web 应 用 。 安 装 后 可 以 在 TE 中 快速 
分 析 页 面 结构 。 该 工具 条 可 集成 在 TE 窗口 中 ， 也 可 以 浮动 窗口 的 形式 存在 。 


IE Developer Toolbar 的 特性 如 下 : 

e ”可 浏览 和 修改 Web 页 的 文档 对 象 模型 。 

e ”通过 多 种 技术 方式 定位 、 选 定 Web 页 上 的 特定 元 素 。 

e ”查看 (X)HTML 对 象 的 类 名 、ID， 以 及 类 似 链接 路 径 、Tab 顺序 、 快 捷 键 等 细节 。 
e ”描绘 表格 、 单 元 格 、 图 片 或 选 定 标记 的 轮廓 。 

e ”即时 重 定义 浏览 器 窗口 的 大 小 。 

e ”清空 浏览 器 缓存 和 Cookie， 被 清除 项 可 从 所 有 对 象 或 给 定 域 中 选择 。 

e. 

. 

pu 


直接 访问 关联 的 W3C 规范 参考 、 正 开发 组 Blog 或 其 他 资源 。 
显示 设计 时 标尺 ， 帮 助 对 齐 对 象 。 


图 3-18 所 示 为 IE Developer Toolbar 显示 页 面 DOM 结构 和 其 样式 信息 的 情形 。 
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3-18 ”使 用 IE Developer Toolbar 浏览 DOM 结构 和 样式 信息 
图 3-19 展示 了 该 工具 提供 的 标尺 功能 。 通 过 它 可 查看 页 面 某 一 元 素 的 宽度 和 高 度 。 
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图 3-19 使 用 IE Developer Toolbar 提供 的 标尺 功能 


Internet Explorer Developer Toolbar 的 网 址 如 下 : 


http://www.microsoft.com/downloads/details.aspx?familyid-E59C3964-672D-4511 
-BB3E-2D5E1DB91038&displaylang-en 


2. DOM Inspector 

DOM Inspector 是 集成 在 Firefox 浏览 器 中 的 一 个 小 工具 。 它 可 以 用 来 检查 和 编辑 页 面 元 素 。 
你 可 以 浏览 每 一 个 DOM 结 点 并 查看 其 样式 属性 。 图 3-20 为 使 用 DOM Inspector 工具 查看 页 面 
元 素 样式 信息 的 情形 。 
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3-20 使 用 DOM Inspector 查看 DOM 结构 和 样式 信息 


3. Firebug 


Firebug(http://www.getfirebug.com/) 是 一 款 基于 Firefox 浏览 器 的 开发 辅助 工具 。 你 可 以 编 
辑 、 监 视 CSS 样式 。 它 还 能 以 图 形 化 方式 显示 盒 模型 信息 。 如 图 3-21 所 示 为 Firebug 显示 页 面 
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某 元 素 的 盒 模型 信息 。 


Firebug - Firebug = Firefox Add-ons 


View Heb 


3-21 使 用 Firebug 图 形 化 显示 元 素 盒 模型 信息 


Firebug 提供 了 浏览 、 实 时 编辑 页 面 元 素 样式 信息 的 功能 ， 在 Style 窗口 中 会 显示 元 素 的 所 
有 相关 样式 信息 ， 开 发 者 可 以 禁用 已 有 属性 、 添 加 新 的 属性 和 样式 声明 ， 如 图 3-22 所 示 。 
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Inherited from div#footer 
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font-family: Verdana Arial, sans-serif; 
font-size: small; 


font-style: normal: 
font-variant: normal; 


linecheight: normal: 
text-align: center: 


3-22 使 用 Firebug 浏览 、 编 辑 元 素 样式 


4. Web Developer 


Web Developer 也 是 基于 Firefox 开发 的 开发 辅助 工具 , 安装 后 会 在 浏览 器 中 添加 一 个 新 的 
工具 条 ， 如 图 3-23 所 示 。 
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3-23 Web Developer 工具 条 


在 单 吉 


页 面 中 的 某 个 元 素 后 , 该 工具 将 立刻 显示 该 元 素 的 样式 信息 , 并 支持 实时 修改 样式 。 
如 图 3-24 所 示 为 当 用 鼠标 单 击 某 个 元 素 后 (红色 方 框 表示 )， 显 示 出 元 素 的 DOM 结构 信息 和 样 


式 表 文件 内 容 。 
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3-24 ”使 用 Web Developer 浏览 样式 信息 


如 图 3-25 所 示 为 正在 使 用 Web Developer 的 实时 修改 样式 的 功能 , 在 现 有 的 样式 中 添加 
条 floatright 规则 ， 让 Firefox 图 标 移 到 右 侧 。 规 则 添加 完毕 后 页 面 即 可 显示 修改 之 后 的 效果 。 
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3-25 ”实时 修改 CSS 代码 并 即时 预览 


E | 
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Web Developer 的 下 载 地 址 如 下 : 


https://addons.mozilla.org/en-US/firefox/addon/60 


3.10 小 结 


CSS， 英 文 全 称 为 Cascading Style Sheet， 中 文 译 为 层 登 样式 表 ， 它 是 一 种 遵循 特定 层 私 规 
则 的 用 于 定义 文档 外 观 样 式 的 语言 。 

CSS 使 得 页 面 内 容 和 样式 信息 分 离 成 为 可 能 。 通 过 CSS, Web 设计 者 不 仅 能 够 设计 出 美 仑 
美 负 的 页 面 效果 ， 还 能 减少 元 余 的 样式 信息 ， 加 快 页 面 的 下 载 速 度 ， 改 善 代码 的 可 读 性 和 可 维 
护 性 。 

CSS 规范 由 国际 万 维 网 联盟 (W3C) 定 义 。 目 前 广泛 使 用 的 规范 版 本 为 CSS 2.1, 新 版 的 CSS3 
还 处 于 工作 草案 或 候选 建议 状态 。 

有 三 种 方式 可 以 将 CSS 应 用 到 (X)HTML 页 面 中 : 四 内 联 方 式 一 一 直接 利用 元 素 的 style 属 
性 添加 样式 信息 ; @ 嵌 入 方式 一 一 将 页 面 中 所 有 样式 信息 集中 在 style 元 素 中 ; @ 外 部 方式 一 一 
通过 COHTML 的 <link> 标 记 将 样式 表 文 档 与 (XJHTML 文档 关联 起 来 。 

对 于 小 型 网 站 来 说 ， 它 所 包含 的 页 面 数量 少 且 样 式 较为 单一 ， 可 以 使 用 一 个 CSS 文件 来 
控制 所 有 页 面 的 样式 。 而 对 于 那些 大 中 型 网 站 来 说 ， 可 以 将 CSS 代码 模块 化 ， 保 存 为 多 个 样 
式 文件 。 

-条 CSS 规则 由 选择 符 和 声明 部 分 组 成 ， 声 明 部 分 包含 0 个 或 多 个 声明 ， 声 明之 间 用 分 
号 隔 开 ， 每 个 声明 由 属性 和 值 组 成 ， 二 者 用 冒号 分 隔 。 选 择 符 指明 哪个 元 素 将 使 用 所 定义 的 样 
式 ， 声 明 部 分 指明 所 定义 的 属性 和 属性 值 。 这 就 是 组 成 CSS 规则 的 全 部 内 容 。 

虽然 不 像 一 般 编 程 语言 要 求 的 那样 一 一 在 实际 开发 过 程 中 代码 应 有 20% 的 注释 内 容 , 但 是 

在 CSS 文档 中 添加 适当 的 注释 信息 可 以 增强 代码 的 可 读 性 ， 便 于 开发 和 管理 。 在 代码 中 使 用 
- 致 的 风格 同样 会 使 代码 便于 阅读 和 维护 ， 并 能 在 视觉 上 吸引 人 。 

使 用 文本 编辑 器 就 可 以 完成 编写 CSS 代码 的 工作 ， 这 也 是 作者 建议 初学 者 使 用 的 工具 。 
CSS 编辑 器 和 Web 开发 工具 所 附带 的 CSS 编辑 功能 会 增添 许多 高 级 特性 ， 比 如 代码 关键 字 彩 
色 显 示 、 样 式 兼容 性 检查 、 样 式 预览 和 可 视 化 设计 ， 它 们 会 帮助 Web 设计 者 提高 工作 效率 。 

一 次 性 编写 出 完美 的 CSS 样式 几乎 是 不 可 能 的 ， 在 设计 过 程 中 很 大 一 部 分 时 间 都 会 花 在 
寻找 问题 根源 、 解 决 问题 和 如 何 兼容 不 同 分 辨 率 和 不 同 版 本 的 浏览 器 上 。 本 章 介绍 的 几 款 开 发 
工具 会 提供 如 下 高 级 功能 : 分 析 页 面 DOM 结构 、 实 时 查看 和 更 改元 素 样 式 、 图 形 化 显示 盒 模 
型 信息 ， 从 而 帮助 设计 者 更 快 地 定位 错误 、 分 析 原 因 、 提 高 工作 效率 。 

从 下 一 章 开始 ， 将 进入 本 书 的 第 二 篇 一 一 CSS 核心 原理 ， 第 4 章 将 介绍 有 关 CSS 选择 符 
的 概念 。 


4 45 CSS 核心 原理 


第 4 章 Xu 择 符 


选择 符 是 CSS 的 基本 内 容 之 一 ， 它 的 作用 在 于 使 样式 能 够 针对 特定 的 页 面 元 素 。 发 挥 选 
择 符 的 作用 对 于 充分 掌握 和 灵活 运用 CSS. 至 关 重 要 。 本 章 将 介绍 CSS 中 选择 符 的 含义 、 使 用 
方法 以 及 各 种 浏览 器 的 支持 程度 。 
本 章 主要 内 容 
什么 是 选择 符 ， 它 有 什么 作用 
选择 符 的 模式 和 语法 
id 和 class 选择 符 ， 如 何 正 确 使 用 
什么 是 伪 类 和 人 擅 元 素 ， 如 何 使 用 
其 他 类 型 的 选择 符 


4.1 选择 符 的 模式 和 语法 


选择 符 是 CSS 规则 的 组 成 部 分 ， 其 作用 是 告知 浏览 器 样式 规则 应 该 应 用 到 页 面 的 哪些 元 
素 中 ， 只 有 理解 和 掌握 了 选择 符 的 含义 和 用 法 ， 充 分 发 挥 其 应 有 的 作用 ， 才 能 使 用 好 样式 表 。 


4.1.1 模式 


选择 符 实 际 上 就 是 一 系列 的 模式 ， 只 要 页 面 中 有 完全 匹配 这 个 模式 的 元 素 存在 ， 样 式 就 会 
应 用 到 该 元 素 上 。 比 如 选择 符 p 就 是 一 种 最 简单 的 模式 ， 它 是 (X)HTML 中 的 元 素 名 ， 匹 配 页 
面 中 所 有 的 p 元 素 。 


4.1.2 1&7 


简单 的 选择 符 可 能 只 需要 一 个 元 素 名 称 ， 而 复杂 的 选择 符 可 能 会 涉及 许多 内 容 ,我们 现在 
就 要 介绍 选择 符 的 语法 。 
CSS 规则 的 语法 并 不 复杂 ，CSS 2.1 规范 是 这 样 定义 的 : 
o ”一 个 简单 选择 符 包含 一 个 通用 选择 符 或 是 一 个 类 型 选择 符 , 它 的 后 面 跟 有 0 个 或 多 个 
记 选 择 符 、 属 性 选择 符 或 者 伪 类 ， 三 者 的 顺序 可 以 任意 。 
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o 一 个 选择 符 是 由 一 个 或 多 个 简单 选择 符 组 成 的 ， 中 间 用 连接 符 相隔 。 
e ”连接 符 可 以 是 空白 、 大 于 号 C>) 或 者 加 号 (+)， 空 白 可 以 出 现在 连接 符 及 其 周围 的 简单 
选择 符 之 间 。 
刚 看 完 上 述 语 法 说 明 时 , 你 会 感觉 有 点 不 知 所 云 , 因为 里 面 出 现 了 许多 新 概念 。 没有 关系 
本 章 余 下 的 内 容 将 会 详细 介绍 这 些 新 概念 ， 阅 读 完 本 章 全 部 内 容 后 你 就 能 掌握 并 使 用 选择 符 。 


42 基本 选择 符 


CSS 规则 的 语法 要 求 每 个 选择 符 必须 包含 一 个 通用 选择 符 或 者 一 个 类 型 选择 符 , 我 们 把 这 
两 类 选择 符 称 为 基本 选择 符 ， 它 们 是 构成 选择 符 的 基础 部 分 。 


4.2.1 通用 选择 符 


通用 选择 符 用 星 号 (9 表示 ， 它 选择 页 面 中 所 有 的 元 素 ， 比 如 ; 


SEL 
background-color:white; 


} 
上 面 这 个 规则 将 所 有 元 素 的 背景 颜色 设置 为 白色 。 在 一 个 简单 选择 符 中 ， 如 果 通 用 选择 符 
不 是 唯一 的 组 成 部 分 ， 那 么 我 们 就 可 以 省 略 掉 它 。 比 如 以 下 两 种 写法 就 是 相同 的 : 
et 
font-size:16px; 


color:red; 


} 


ELETE 
font-size:16px; 
color:red; 
} 
上 面 的 第 一 条 规则 中 ， 通 用 选择 符 后 面 跟 了 一 个 属性 选择 符 (我 们 后 面 会 介绍 它 使 用 了 
class 属性 )， 在 第 二 条 规则 中 ， 星 号 被 省 略 掉 了 。 


42.22 ”类 型 选择 符 


类 型 选择 符 ， 又 叫 元 素 选择 符 或 标记 选择 符 ， 是 所 有 选择 符 中 最 常见 的 。 选 择 符 的 全 部 内 
容 就 是 某 一 种 (X)HTML 元 素 名 称 ， 它 匹配 文档 中 对 应 的 元 素 。 例 如 : 


hl ( 
color:red; 


N 


上 面 的 规则 应 用 到 所 有 的 <hl> 标 记 ， 并 指定 其 颜色 为 红色 。 类 型 选择 符 简单 易 用 ， 但 也 有 
很 大 的 限制 。 若 要 进行 更 具体 、 更 复杂 的 选择 ， 就 要 用 到 后 面 将 介绍 的 选择 符 了 。 


43 组 ik 择 


假如 多 个 元 素 具有 相同 的 CSS 样式 ， 为 了 减少 代码 元 余 ， 就 可 以 使 用 组 选择 ， 考 虑 如 下 
CSS 代码 : 
hli{ 
font-family:Tahoma，Rrial，" 宋 体 "7 
font-size:l4px; 


font-family:Tahoma, Arial, "宋体 "; 
font-size:l4px; 


font-family:Tahoma, Arial, "宋体 "; 
font-size:l4px; 


p#titlef 
font-family:Tahoma, Arial, "宋体 "; 
font-size:l4px; 
) 
hl. h2, h3 和 id 为 title 的 p 元 素 的 样式 是 一 样 的 ， 但 这 样 写 会 使 CSS RERA, 
我 们 可 以 将 选择 符 组 合 在 一 起 写 ， 例 如 上 面 的 规则 可 以 写成 
BI; b2; b3, pititle( 
font-family:Tahoma, Arial, "宋体 "; 
font-size:l4px; 
) 
这 4 个 选择 符 被 组 合成 为 一 个 选择 符 ， 代 码 量 大 大 降低 了 。 使 用 组 合 选择 符 可 以 很 方便 地 
将 含有 相同 样式 的 元 素 组 合 在 一 起 。 


4.4 id 和 class 选择 符 


id 和 class 选择 符 可 以 说 最 常用 的 两 种 选择 符 了 ， 前 者 根据 赋 给 元 素 的 id 值 进行 匹配 ， 而 
后 者 根据 元 素 的 class 属性 进行 匹配 ,合理 使 用 id RI class 选择 符 会 大 大 增强 样式 代码 的 利用 率 ， 
减少 元 余 。 
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4.4.1 id 选择 符 


每 个 (X)HTML 元 素 都 包含 一 个 id 属性 ， 该 属性 值 是 唯一 的 ， 可 以 唯一 标识 一 个 元 素 。 通 
过 id， 我 们 就 可 以 选择 更 具体 的 元 素 。id 选择 符 由 井 号 “#” 加 id 值 组 成 ， 考 虑 如 下 CHTML 
代码 : 

<hl id="bulletinTitle"> 公 告 </h1> 

<p id="bulletinContent"> 很 高 兴 我 的 博客 和 大 家 见面 了 </p> 

<hl id="articleTitle"> 如 何 同时 使 用 IE6 和 IE7? «/h1» 

<p id-"articleContent"»Web 开发 人 员 通 常 需要 在 多 种 类 型 的 浏览 器 上 测试 页 面 效果 ， 但 是 微软 

的 IE6 和 IE7 不 能 并 存 ， 页面 设计 者 不 得 不 使 用 多 台电 脑 或 安装 多 系统 或 虚拟 机 来 解决 问题 。 下 面 我 就 

介绍 如 何在 同一 个 系统 下 同时 使 用 两 个 版 本 的 IE 浏览 器 。</p> 


我 们 给 每 一 个 hl ERM p 元 素 分 配 不 同 的 id， 通过 id 选择 符 ， 就 可 以 更 精确 地 控制 样式 
所 应 用 到 的 元 素 ， 比 如 只 要 求 前 两 个 元 素 应 用 样式 : 


hlfbulletinTitle( 
color:white; 
background-color:silver; 


} 

p#bulletinContent{ 
color:yellow; 
background-color :maroon; 


} 
效果 如 图 4-1 所 示 ， 只 有 特定 元 素 使 用 了 样式 ， 其 他 元 素 不 受 任何 影响 。 


公告 


如 何 同时 使 用 IE6 和 IE7? 


Web 开 发 人 员 通 常 需要 在 多 种 类 型 的 浏览 器 上 测试 页 面 效果 ， 但 是 微软 的 
nag 页 面 设计 者 不 得 不 使 用 多 台电 脑 或 安装 多 系统 或 虚 
BS 。 下面 我 就 介绍 如 何在 同一 个 系统 下 同时 使 用 两 个 版 本 


4-1 通过 id 给 特定 元 素 添加 样式 
由 于 id 具有 唯一 性 ， 因 此 可 以 将 # 号 前 的 元 素 名 称 省 略 掉 ( 实 际 上 ，# 号 前 添加 了 一 个 省 略 
了 星 号 的 通用 选择 符 )， 但 增加 元 素 名 称 可 增加 代码 的 可 读 性 。 


(OQ 注意 : 包含 元 素 类 型 的 过 选择 符 与 不 包含 元 素 类 型 的 id 选择 符 并 不 是 完全 等 同 的 ， 它 
们 拥有 不 同 的 确定 度 。 有关 确定 度 的 概念 会 在 第 6 章 中 进行 介绍 。 


4.4.2 class 选择 符 


我 1 


性 ， 


class 选择 符 是 属性 选择 符 的 一 种 ， 由 于 它 的 使 用 频率 较 高 且 通 常 和 id 选择 符 一 起 使 用 ， 
] 把 它 放 在 这 里 进行 介绍 。 

(X)HTML 元 素 包含 class 属性 ， 与 id 属性 的 不 同 之 处 在 于 ，class 属性 值 不 要 求 具有 唯一 
即 多 个 元 素 可 以 拥有 相同 的 class 值 ， 因 此 class 选择 符 可 以 同时 选择 多 个 元 素 。class 选择 


符 


日 英文 句点 “.” 加 类 名 组 成 ( 稍 后 我 们 会 看 到 这 种 写法 是 类 属性 选择 符 的 一 种 特殊 形式 )。 


将 上 一 小 节 的 代码 稍 做 修改 如 下 : 


<hl id-"bulletinTitle" class="title"> 公 告 </hl> 

«p id-"bulletinContent" class="content"> 很 高 兴 我 的 博客 和 大 家 见面 了 </p> 

«hl id-"articleTitle" class="title"> 如 何 同时 使 用 IE6 和 IE7? «/hl1» 

<p id="articleContent" class="content">Web 开发 人 员 通 常 需要 在 多 种 类 型 的 浏览 器 上 测试 
页 面 效 果 , 但 是 微软 的 IE6 和 IET 不 能 并 存 , 页面 设计 者 不 得 不 使 用 多 台电 脑 或 安装 多 系统 或 虚拟 机 来 
解决 问题 。 下 面 我 就 介绍 如 何在 同一 个 系统 下 同时 使 用 两 个 版 本 的 IE 浏览 器 。</p> 

«hl class="title">Internet Explorer 7 新 特性 </h1> 

<h2 class="titleLeve12"> 选 项 卡 式 浏览 </h2> 

<p> 选 项 卡 式 浏览 一 向 是 Internet Explorer 的 弱项 ， 只 有 通过 外 挂 程序 解决 ， 但 效果 不 是 很 理想 。 
因此 ， 选 项 卡 式 是 Internet Explorer 用 户 最 迫切 需要 的 功能 。 利 用 选项 卡 式 浏览 ， 可 以 在 一 个 浏 
览 器 窗口 中 管理 多 个 页 面 ， 极 大 地 提高 了 浏览 效率 ， 避 免 了 开启 多 个 窗口 而 使 桌面 变 得 杂乱 不 堪 。 使 用 
Internet Explorer 7， 只 需 单 击 选项 卡 即 可 在 网 站 间 切 换 。 

«/p» 


CSS 代码 如 下 : 


hl.title( 
color:white; 
background-color:silver; 
) 
p-content( 
color:yellow; 
background-color:maroon; 
) 
h2.titleLevel2( 
color:gray; 


) 
从 图 4-2 可 以 看 出 ，class 属性 为 title 的 两 个 hl 元 素 的 文字 为 白色 ， 背 景 为 银灰 色 ，class 


属性 为 content 的 两 个 p 元 素 的 文字 为 黄色 ， 背 景 是 暗 红色 。 但 样式 不 影响 最 后 一 个 p 元 素 ， 


色 
Go 


因为 它 没 有 指定 class 属性 。 最 后 , 样式 代码 把 class 值 为 titleLevel2 的 h2 元 素 中 的 文字 设 为 灰 


在 上 述 的 例子 里 面 ， 我 们 给 同一 类 型 的 元 素 指定 了 相同 的 类 名 ， 当 然 也 可 以 给 不 同类 型 的 


元 素 指定 相同 的 类 名 。 请 看 下 面 的 COHTML 代码 : 


<hl id-"newfeature" class="important">Internet Explorer 7 新 特性 </h1> 

<h2 id-"zoom" class="important"> 页 面 缩放 </h2> 

<p> 在 原来 版 本 的 IE 浏览 器 中 ， 用 户 可 以 对 文字 进行 缩放 操作 ， 新 版 Internet Explorer 7 在 这 一 
基础 上 增强 了 缩放 功能 。 该 功能 不 仅 可 以 缩放 文字 ， 而 且 能 对 <span class="important"> 页 面 中 的 


eM 
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任意 图 形 </span> 进 行 缩放 。 网 站 上 较 小 的 文本 或 缩 略图 图 像 现在 都 可 以 放大 浏览 了 。 用 户 只 需 按 住 
Ctrl 键 同 时 滚动 鼠标 滚轮 即 可 实现 缩放 功能 。 
</p> 


(ZLCILCGIM MEM NNNM 
如 何 同时 使 用 IE6 和 IE7? 


Internet Explorer 7 新 特性 

选项 卡 式 浏览 

选项 卡 式 浏览 一 向 是 Tnternet Explarer 的 弱项 ， 只 有 通过 外 挂 程序 解决 ， 但 效果 不 是 很 理想 。 因 此 ， 
AMRA Internet Explorer 用 户 景 这 切 需 的 马 能 。 利 用 选项 卡 式 浏览 ， 可 以 在 一 个 浏览 器 窗 训 


最 迫 1 
中 管理 多 个 页 面 ， 极 大 地 提高 了 浏览 效率 ， 避 免 了 开启 多 个 窗口 而 使 桌面 变 得 杂乱 不 堪 。 使 用 
Internet Explorer ?， 只 需 单 击 选 项 卡 即 可 在 网 站 间 切 换 。 


4-2 ”使 用 class 选择 符 给 多 个 元 素 指定 样式 
CSS 代码 如 下 : 


*.important{ 
font-weight:bold; 
color:red; 


) 
上 述 规则 使 用 了 通用 选择 符 加 类 选择 符 ， 它 匹配 所 有 class 属性 为 important 的 元 素 ， 这 里 
星 号 可 以 省 略 。 在 图 4.3 中 ， 相 应 元 素 中 文字 显示 为 红色 租 体 。 
Internet Explorer 7 新 特性 


页 面 缩放 


在 原来 版 本 的 IE 浏览 器 中 ， 用 户 可 以 对 文字 进行 缩放 操作 ， 新 版 Internet Explorer 7 在 这 一 基础 
上 增强 了 缩放 功能 。 该 功能 不 仅 可 以 缩放 文 宇 ， 而 且 能 对 页 面 中 的 任意 图 形 进 行 缩放 。 网 站 上 较 
So tu 用 户 只 需 按 住 Ctrl 键 同时 深 动 鼠标 滚轮 即 可 实现 缩 


4-3 使 用 class 选择 符 给 不 同类 型 元 素 指定 样式 


4.4.3 多 重 class 


由 上 节 的 内 容 可 知 ，class 属性 和 id 属性 的 不 同 之 处 在 于 ，id 属性 是 唯一 的 ， 而 同一 class 
属性 可 赋 给 多 个 元 素 。 除 此 之 外 ， 一 个 COHTML 元 素 还 可 以 属于 多 个 class。 这 就 是 多 重 
class(multiple class)。 下 面 的 a 元 素 就 使 用 了 多 重 class， 它 同时 属于 classl 和 class2: 


«a class="classl class2" href="/"> 链 接 </a> 


使 用 两 个 class 选择 符 就 可 以 分 别 指定 它们 的 样式 : 


a.classl( 
font-size:1l2px; 

} 

a.class2( 
color:red; 


) 


上 面 两 条 规则 使 用 了 class 选择 符 ， 但 它们 还 没有 充分 发 挥 class 选择 符 的 功能 ， 因 为 它们 
不 仅 指定 了 a 元 素 的 样式 ， 其 他 任何 属于 classl 或 class2 的 a 元 素 均 会 应 用 这 个 样式 ， 这 样 选 
择 符 不 能 精确 匹配 a 元 素 。 而 使 用 多 重 选 择 符 (Multiple Selector) 就 能 达到 这 个 目的 ， 它 可 以 精 
确 匹 配 那 些 同时 属于 多 个 class 的 元 素 ， 比 如 下 面 这 两 条 规则 只 会 把 上 面 的 a 元 素 文字 设 为 红 
色 ， 其 他 任何 只 属于 classl 或 class2 的 元 素 都 不 会 受到 影响 : 


a.classl.class2( 
color:red; 
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a.class2.classl( 
color:red; 


) 


使 用 多 重 class 和 多 重 选 择 符 的 优势 在 于 ， 你 可 以 设计 一 个 基本 class 的 样式 作为 默认 值 ， 
若 要 添加 新 样式 ， 则 可 以 设计 一 个 新 class 样式 并 追加 进来 。 原 来 设计 的 基本 样式 不 需要 任何 
改动 ， 从 而 形成 一 种 层次 化 的 设计 。 请 看 下 面 的 示例 。 

X)HTML 代码 : 


«div class-"box"» 
«div class="title"> 产 品 列表 </div> 
<div class="content"> 
<h3>Web Professional«/h3» 
<p>Web Professional 是 一 款 可 视 化 的 web 开发 软件 ， 它 能 快速 地 创建 优美 的 web 
页 面 ， 提 供 了 强大 的 网 站 管理 功能 。</p> 
</div> 
<div class="content"> 
<h3>Web Express</h3> 
<p>Web Express 是 一 款 轻 巧 的 可 视 化 Web 开发 工具 ， 使 用 它 可 快速 创建 您 所 需要 的 
Web 页 面 。</p> 
</div> 
</div> 


CSS 代码 如 下 : 


body{ 
font-family:Tahoma, Arial, "R"; 
font-size:small; 


eM 
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div.box ( 
border:lpx solid f£E2DFDO0; 
margin-bottom:lem; 


div.box div.title ( 
padding:0.3em; 
padding-left:0.6em; 
background: £F2FÜ0DD; 
font-size:0.9em; 
font-weight:bold; 


div.box div.content( 
margin:0.3em; 


) 

div.box div.content *( 
margin:0; 

) 

div.box h3( 
font-weight:bold; 
font-size:0.9em; 
padding:0.5em; 
color:$£0033CC; 

) 

div.box pf 


font-size:0.9em; 
padding:0.5em; 


div.content + div.content( 
border-top:lpx dotted £$E2DFDO0; 


如 图 4-4 所 示 为 样式 的 效果 。 


产品 列表 
Web Professional 


Web Professiona 旭 一 款 可 视 化 的 Web 开 发 软件 ， 它 能 快速 地 创建 忧 美的 Web 页 
面 ， 提 供 了 强大 的 网 站 管理 功能 ， 


Web Express 


Web Express 是 一 款 轻 巧 的 可 视 化 Web 开 发 工具 ， 使 用 它 可 快速 包 了 您 所 需要 的 
Web 页 面 。 


图 4-4 在 运用 多 重 选 择 符 之 前 的 一 般 情况 下 的 样式 


这 些 规则 涉及 的 样式 在 这 里 不 做 具体 讲解 ， 因 为 这 不 是 我 们 的 重点 。 假 如 某 一 段 时 间 该 
Web 页 面 需要 重点 突出 产品 列表 部 分 (比如 更 换 一 个 更 为 醒目 的 背景 色 )， 以 后 会 再 恢复 正常 。 
为 了 达到 此 目的 ， 你 当然 可 以 直接 修改 原 有 的 CSS 代码 ， 恢 复 时 再 修改 回来 。 但 是 多 重 选择 
符 会 减少 你 一 定 的 工作 量 ， 你 可 以 事先 使 用 多 重 选择 符 添加 突出 显示 的 样式 : 


/* css for featured box */ 

div.box.featured { 
background-color: £$FFFDBA; 

i 

div.box.featured div.title { 
background-color: #FFF94E; 

} 


当 需 要 突出 显示 这 部 分 内 容 时 ， 你 只 需要 添加 一 个 新 的 class 属性 featured 到 div 中 : 
«div class-"box featured"> 


图 4-5 中 的 背景 色 已 经 变 为 醒目 的 黄色 。 


图 4-5 追加 新 的 class 属性 并 使 用 多 重 选择 符 


若 要 恢复 默认 的 样式 ， 只 需要 去 掉 class 属性 相应 的 部 分 即 可 。 假 如 某 一 段 时 间 要 重点 突 
出 某 个 单一 的 产品 ， 同 样 你 可 以 先 写 好 样式 的 代码 ， 需 要 时 只 要 追加 新 的 class 属性 到 相应 的 
元 素 即 可 。 这 种 方式 比 直接 修改 Css 代码 方便 了 许多 ， 也 避免 了 由 于 修改 的 遗漏 而 可 能 导致 
的 错误 。 
© 注意 : Internet Explorer 6 及 以 前 版 本 对 多 重 class 支持 效果 并 不 理想 。 上 述 示例 中 的 选 

择 符 div.box.featured 应 该 只 能 匹配 class 属性 为 “box featured” 的 div 元素, 但 
是 在 正中 它 还 会 匹配 class 属性 为 “featured” 的 div AŽ. 因此, 在 命名 多 重 class 
属性 时 要 倍加 小 心 ， 否 则 在 IE6 中 会 出 现 意 想不到 的 效果 。 


4.44 用 id 还 是 class 
你 可 以 给 任意 数量 、 任 意 类 型 的 元 素 指定 class 属性 。 而 一 个 id 属性 值 只 能 赋值 给 唯一 的 
元 素 。 若 你 指定 一 个 hl 元 素 的 id 值 为 frst-title， 那 么 任何 其 他 元 素 都 不 能 再 指定 这 个 这 值 。 


当 需 要 给 页 面 某 个 单独 的 元 素 ( 比 如 登录 部 分 的 标题 文字 或 显示 天 气 预报 的 侧 栏 ) 指 定 样式 
时 ， 你 就 该 使 用 id 选择 符 。 当 需要 给 一 组 元 素 指定 样式 时 ，class 选择 符 则 是 你 的 首选 。 


4.4.5 class 和 id 属性 的 命名 规则 


X)HTML 元 素 的 class 和 id 属性 值 可 用 来 标识 某 些 或 某 个 特定 的 元 素 ,开发 人 员 在 命名 这 


eg 


c 


E] 
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些 属 性 值 时 应 尽量 保持 名 称 简单 明了 且 符合 一 定 的 命名 规范 。 虽 然 命名 规范 的 约定 与 开发 人 员 
的 个 人 习惯 有 关 ， 但 是 如 果 命 名 方式 太 随意 或 者 太 个 性 化 ， 就 会 导致 CSS 样式 代码 难以 阅读 
和 维护 。 下 面 就 介绍 一 些 比较 常见 的 class 或 id 属性 值 的 命名 方式 。 


1. 根据 样式 含义 命名 class 属性 
含有 class 选择 符 的 CSS 规则 往往 将 样式 应 用 在 若干 个 (X)HTML 元 素 上 , 这 些 规则 通常 会 
包含 一 些 共 有 的 样式 ， 这 时 可 以 根据 它们 的 具体 含义 来 命名 ， 比 如 下 面 这 些 class 属性 值 。 
cRed: 小 写 c 表明 颜色 (color)， 后 面 加 有 具体 颜色 名 称 。 
fBold: 小 写 f 表 示 字 体 (font)， 后 面 表示 粗 体 显示 。 
noBorder: 表明 元 素 不 使 用 边框 。 
left: 表明 元 素 向 左 浮动 。 
. 根据 元 素 所 在 页 面 位 置 来 命名 class 和 id 属性 


使 用 描述 元 素 所 在 页 面 位 置 的 词汇 来 对 其 进行 命名 也 是 一 种 比较 常见 的 命名 方式 。 有 时 也 
和 元 素 的 用 途 结合 在 一 起 使 用 。 这 种 方式 使 得 class 以 及 id 的 名 称 如 下 面 所 示 。 

* header: 表示 页 面 顶端 区 域 。 

* footer: 页 面 底 脚 部 分 区 域 。 

€  lefiSide: 页 面 左 侧 区 域 。 

©  rightCol: 页 面 右 侧 栏目 区 域 。 

这 种 根据 元 素 位 置 来 对 属性 进行 命名 的 方式 简单 有 效 ， 但 也 有 它 的 刺 端 。 比 如 页 面 放置 新 
闻 的 区 域 在 开始 设计 时 放 在 了 左 侧 , 你 可 以 起 个 类 似 于 leftSide 的 id 名 。 但 是 有 一 天 页 面 改版 ， 
需要 把 新 闻 区 域 移动 到 右 侧 ，leftSide 这 个 名 称 就 显得 极为 不 合适 了 ， 继 续 使 用 可 能 造成 理解 
的 混乱 ， 这 时 你 就 不 得 不 重新 命名 。 

为 了 避免 这 种 混乱 的 发 生 ， 可 以 采用 下 面 介绍 的 命名 方式 。 

3. 根据 使 用 样式 的 元 素 用 途 来 命名 class 和 id 属性 

某 些 (X)HTML 片段 在 页 面 中 不 止 出 现 一 次 ， 它 们 会 被 大 量 地 重复 使 用 ， 比 如 表示 更 多 信 
息 的 链接 文字 (通常 为 “更 多 ”二 字 )、 固 定 宽度 的 广告 条 区 域 等 。 这 时 可 以 按照 下 面 的 方式 根 
据 (X)HTML 元 素 的 用 途 来 命名 class 属性 。 

*  ad468: 表示 宽度 为 468px 的 广告 条 区 域 。 

© ara: 表示 一 个 区 域 。 

@ more: 表示 显示 更 多 信息 的 链接 区 域 。 

@  newsHeadline: 表示 所 有 新 闻 的 标题 区 域 。 

e  inputText: 表示 所 有 需要 用 户 输入 的 文字 。 

@  codeTextArea: 表示 显示 代码 的 文字 区 域 。 
对 于 那些 只 出 现 一 次 的 (X)HTML 元 素 , 适合 添加 id 属性 ， 可 以 按照 以 下 方法 对 id 属性 进 
名 。 
r 
e 
. 


N 


行 命 
mainNav: 表示 一 级 菜单 导航 区 域 。 
subNav: 表示 二 级 菜单 导航 区 域 。 
copyright: 表示 显示 版 权 信息 的 区 域 。 


这 种 命名 方式 意味 着 元 素 的 位 置信 息 与 其 内 容 是 完全 分 离 的 。 这 些 名 字 同 根据 位 置 命名 的 
方式 一 样 简单 易 懂 ， 但 它们 描述 了 页 面 元 素 的 用 途 而 非 位 置 。 这 使 得 CQ)HTML 代码 更 加 符合 
使 用 纯粹 的 结构 化 标记 的 初衷 , 即 开 发 人 员 可 以 在 不 改变 标记 的 情况 下 对 不 同 的 显示 格式 进行 
处 理 。 开 发 人 员 还 可 以 对 元 素 的 用 途 进 行 如 下 的 细 化 ， 从 而 实现 一 种 结构 化 的 命名 方式 。 

* login: 表示 登录 区 域 。 

* ”loginTitle: 表示 登录 区 域 的 标题 。 

*  loginTxt: 表示 登录 区 域 的 文字 。 

*  loginIput: 表示 登录 区 域 的 输入 区 域 。 

这 些 名 称 都 是 在 login 作为 基础 名 称 之 上 扩展 而 来 ， 由 外 层 逐 步 深入 细 化 到 内 层 。 开 发 人 
员 很 容易 在 原 有 的 基础 上 对 样式 进行 修改 。 

命名 方式 不 仅仅 只 有 以 上 提 到 的 三 种 ， 但 它们 是 最 常见 的 。 在 实际 开发 过 程 中 通常 把 三 种 
命名 方式 结合 在 一 起 使 用 。 在 表达 页 面 基 本 结构 的 时 候 可 以 使 用 诸如 header、footer 等 表示 位 
置 的 名 称 ， 在 细节 部 分 使 用 根据 用 途 命名 的 名 称 ， 对 于 那些 需要 多 次 使 用 的 样式 ， 则 可 以 使 用 
样式 的 含义 进行 命名 。 

[À 提示 :， 程序 代码 通常 会 遵循 Pascal 或 camel 命名 法 ， 在 命名 元 素 的 class 和 id 属性 时 也 
可 以 采用 这 两 种 命名 法 的 一 种 。Pascal 命名 法 指名 称 中 每 个 单词 的 首 字母 大 写 ， 
如 MainNav、LoginInput; camel 命名 法 指名 称 中 第 一 个 单词 的 第 一 个 字母 不 是 
大 写 ， 后 面 的 单词 首 字母 需要 大 写 ， 如 subNav、sideBar。 除 此 之 外 ， 单 词 之 间 
也 可 以 由 连 字符 “-” 或 下 划 线 “ ”相连 ,单词 首 字母 全 部 小 写 , 比如 : search-input, 


header-logo. 


4.5 伪 元 素 和 伪 类 


除了 类 型 选择 符 、ID 选择 符 和 class 选择 符 外 ，CSS 还 允许 使 用 伪 元 素 和 伪 类 选择 符 。 

伪 元 素 是 一 种 在 (X)HTML 标记 中 并 不 实际 存在 的 抽象 元 素 。 比 如 ， 标 记 语 言 并 没有 一 种 
机 制 可 以 访问 某 个 元 素 的 首 个 字符 或 首 行内 容 。 而 CSS 伪 元 素 则 创建 了 这 样 的 虚拟 元 素 ， 通 
过 这 种 虚拟 元 素 就 可 以 访问 并 控制 其 样式 。 


4.5.1 :first-line 和 :first-letter 伪 元 素 


使 用 :first-line 伪 元 素 可 以 添加 只 应 用 于 某 元 素 首 行 的 样式 。 该 元 素 必 须 是 块 级 (Block)、 内 
联 块 (Inline-block)、 表 格 标题 (Table Caption) 或 表格 单元 (Table CelD)， 所 添加 的 样式 属性 也 是 有 
限 的 : 
字体 属性 
颜色 (coloD 
背景 属性 
词 间 距 (word-spacing) 


APN 


CN 


| en] 
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字 间 距 (letter-spacing) 
文字 装饰 (text-decoration) 
垂直 对 齐 (vertical-align) 
文字 变形 (text-transform) 
e ”行距 (line-height) 
下 面 这 条 规则 将 p 的 首 行文 字 的 显示 比例 增 大 了 : 


p:first-line: (font-size:1305;] 


:first-letter， 顾 名 思 义 ， 就 是 指 元 素 的 首 个 字符 ， 虽 然 在 (X)HTML 代码 中 并 没有 对 应 的 标 
记 ， 但 你 可 以 在 CSS 中 使 用 它 。 这 个 伪 元 素 使 得 我 们 很 容易 定义 、 更 改 首 字 符 的 样式 ， 而 不 
用 定义 新 的 标记 。 同 :first-line 一 样 ， 应 用 :first-letter 元 素 需 是 块 级 元 素 、 内 联 元 素 、 列 表 项 、 
表格 标题 或 表格 中 的 单元 格 。 除 了 可 以 使 用 :first-line 规定 的 属性 外 ，:first-letter 还 可 以 使 用 如 


下 属性 ( 集 ): 
e 浮动 float) 
e 边 距 (margin) 


© ”填充 (padding) 
e ”边框 (border) 

下 面 这 个 示例 运用 了 :first-line 和 :first-letter 伪 元 素 。 
(X)HTML 代码 : 


«hl class="title">IE 1.0 的 诞生 </h1> 

<p class="textbody">1995 年 8 月 ， 微 软 家 族 中 一 个 日 后 呼风唤雨 的 成 员 听 昕 落地 ， 它 就 是 
Microsoft Ineternet Explorer 1.0 了 ， 但 当时 微软 并 未 对 这 个 新 生 儿 给 予 多 大 的 照顾 ， 因 为 比 
尔 盖 茨 正 沉浸 在 1995 年 1 月 发 布 的 Windows 95 所 带 来 的 巨大 喜悦 里 ， 这 才 是 他 们 的 重头 戏 。</p> 
«p class="textbody"> 这 个 其 貌 不 扬 功能 简陋 的 IE 1.0 只 是 基于 NCSA Mosaic 的 简单 "修改 版 "。 
没有 增加 太 多 的 新 特性 ， 不 支持 Java. 不 支持 插件 ,浏览 速度 也 很 缓慢 。Netscape 浏览 器 还 没有 把 这 
个 小 家 伙 看 在 眼 里 ， 据 说 当年 给 IE1 .0 做 研发 工作 的 只 有 几 个 人 而 已 。</p> 

«p class="textbody"> 这 时 IE1.0 还 是 一 个 单薄 的 程序 , 并 未 引起 太 大 的 反响 。 人 们 仍然 用 Mosaic 
或 者 Netscape 来 浏览 网 页 。 不 过 面 对 Netscape 如 日 中 天 的 气势 , 微软 似乎 也 嗅 到 了 一 丝 危机 。</p> 


样式 表 部 分 如 下 : 


p.textbody:first-letter( 
font-size:xx-large; 
background-color:black; 
color:red; 
font-weight:bold; 

H 

p.textbody:first-line( 
background-color:silver; 


H 
结果 如 图 4-6 Bras TET 浏览 器 )。 


c 


Ineternet Explorer 1 


ESSERI UEBER SSRK ERR pe 


ERR MEGA, RALFA. DES LIST ANE p 


Netscape 来 浏览 网 贝 。 不 过 面 对 Netscape 如 日 中 天 | ， 到 了 一 丝 
危机 。 


4-6 ”使 用 :first-letter 和 :first-line 伪 元 素 设 计 首 字 和 首 行 样式 (IE7 浏览 器 ) 


© 注意 : IE6 及 以 前 版 本 不 支持 :first-line 和 :first-letter 伪 元 素 , 因此 上 述 代码 在 其 中 不 会 产 
生 任 何 效果 。 另 外 ， 图 4-6 所 示 结 果 取 自 IE7， 它 和 Firefox 的 显示 结果 也 存在 细 
微 的 差别 。 若 要 兼容 IE6， 就 需要 手动 在 首 字 周 围 添 加 一 个 标记 ， 比 如 <span>。 
再 添加 一 个 class 属性 ， 比 如 class-"first letter"， 然 后 在 规则 里 面 添加 一 个 class 
选择 符 。 例 如 : span.first_letter， 最 后 把 样式 填写 到 声明 当中 。 对 于 :first-line 伪 元 
素 , 由 于 该 伪 元 素 的 具体 范围 在 显示 之 前 是 不 确定 的 , 事先 不 可 能 添加 一 个 标记 ， 
因此 目前 也 没有 很 好 的 解决 办 法 。 


4.5.2 :before 和 :after 伪 元 素 


:before 和 :after 伪 元 素 可 以 用 来 确定 要 产生 的 内 容 放置 在 哪里 ， 可 以 在 元 素 的 开头 或 结束 
位 置 。 请 看 下 面 的 示例 : 
p:before{ 
content: JE ZG AJ! "; 
} 
p:after( 
content : "不 要 迟到 。" 
} 


<p> 今 日 下 午 2 点 将 在 报告 厅 举 行 专场 学 术 报告 会 ， 请 准时 参加 。</p> 
结果 如 图 4-7 Bros. p 元 素 内 容 前 后 分 别 添加 了 “重要 通知 ! ”和 “不 要 迟到 。” 几 个 字 。 
重要 通知 ! 今日 午 2 点 将 在 报告 厅 举 行 专场 学 术 报告 会 ， 请 准时 参加 。 不 要 迟到 。 
4-7 ”使 用 :before 和 :after 伪 元 素 添加 新 内 容 (Firefox 浏览 器 ) 


before 和 :after 伪 元 素 不 可 以 在 一 条 规则 中 同时 使 用 , 但 可 以 分 别 放 在 两 条 不 同 的 规则 中 ， 
这 样 既 能 在 元 素 之 前 也 能 在 其 后 添加 新 的 元 素 。 另 外 ， 它 还 可 以 同 其 他 类 型 选择 符 一 起 相 结合 
使 用 。 


Be 


mum) Imm 、 


O 注意 ， 目前 为 止 ， 任 何 版 本 的 正 浏览 器 均 不 支持 :before 和 :after 伪 元 素 ， 图 4-7 显示 的 
结果 取 自 Firefox 浏览 器 。 若 要 兼容 IE 浏览 器 ， 需 要 手动 添加 新 元 素 并 设 定 相 应 
的 样式 。 


4.5.3 :first-child 伪 类 


:first-child 伪 类 匹配 满足 下 面条 件 的 元 素 : 该 元 素 是 其 父 元 素 的 首 个 子 元 素 。 在 下 面 这 个 
示例 中 ， 选 择 符 匹 配 那些 是 其 父 元 素 第 一 个 孩子 的 p 元 素 。 
p:first-child( 
text-indent:2em; 


) 
上 述 规则 会 使 得 下 面 (X)HTML 代码 中 的 p 元 素 首 行 有 两 个 字符 的 缩 进 : 


<div> 
<p> 本 段 文 字 是 父 元 素 div 的 首 个 子 元 素 ，: first-child 伪 类 会 匹配 本 元 素 ， 因 而 会 有 两 
个 字符 的 缩 进 。</p> 

</div> 


但 是 下 面 代码 中 的 p 元 素 就 不 会 应 用 此 样式 了 ， 因 为 它 不 是 div 的 首 个 子 元 素 。 


<div> 
<h1> 我 才 是 首 个 子 元 素 </h1> 
<p> 本 段 文 字 不 是 父 元 素 div 的 首 个 子 元 素 ，: first-child 伪 类 不 会 匹配 本 元 素 ， 因 而 不 


会 应 用 任何 样式 。</p> 


</div> 
效果 如 图 4-8 所 示 。 


本 段 文字 是 父 元 素 div 的 首 个 子 元 素 ，{irst-child 伪 类 会 匹配 本 元 素 ， 因 而 会 
有 两 个 字符 的 缩 进 。 


我 才 是 首 个 子 元 素 


本 段 文字 不 是 父 元 素 dk 的 首 个 子 元 素 ， 了 ast-child 伪 类 不 会 匹配 本 元 素 ， 因 而 不 
会 应 用 任何 样式 。 


图 4-8 :first-child 伪 类 的 作用 


4.54 ”有 关 链 接 的 伪 类 


CSS 提供 :link 和 :visited 伪 类 来 区 分 一 个 链接 是 尚未 访问 还 是 已 经 访问 过 ， 这 两 种 状态 相 
互 排斥 ， 一 个 链接 不 可 能 同时 处 于 两 种 状态 ， 只 能 是 二 者 之 一 。 
有 关 链 接 的 使 用 我 们 将 在 第 10 章 中 做 详细 的 介绍 。 


L 


45.5 “有关 用 户 动态 行为 的 伪 类 


网 页 是 用 来 与 用 户 交互 的 ， 用 户 的 某 些 行为 会 在 页 面 元 素 中 表现 出 来 ， 比 如 将 鼠标 其 停 在 
某 个 元 素 上 或 是 在 某 个 元 素 上 按 下 鼠标 左 键 CSS 提供 了 三 种 伪 类 来 处 理 , 有 关 动 态 行为 伪 类 ， 
也 放 到 第 10 章 中 进行 具体 的 讲解 。 


4.5.6 :lang 伪 类 


COHTML 元 素 有 个 lang 属性 ， 它 指定 了 该 元 素 所 使 用 的 语言 。 语 言 规定 了 文本 方向 、 可 使 
用 的 字体 、 自 动 阅读 器 的 发 音 规则 等 。 浏 览 器 通过 该 属性 可 以 正确 显示 出 与 语言 相关 的 符号 。 
CSS 提供 :lang 伪 类 来 匹配 使 用 某 种 语言 的 元 素 。 比 如 : 
:lang (de) { 
color:red; 
font-weight :bold; 
} 
以 上 规则 的 作用 是 ， 将 所 有 德 文 内 容 的 文字 设 为 红色 粗 体 ， 我 们 只 需要 在 (X)HTML 元 素 
中 添加 lang 属性 ， 并 设置 其 属性 名 为 “de” 即 可 ， 比 如 : 
<p> 德 国人 早晨 见面 打招呼 会 说 : <span lang="de">Guten tag«/span». </p> 
效果 如 图 4-9 所 示 ( 该 图 取 自 Firefox 浏览 器 ， 正 不 支持 )。 
德国 人 早晨 见面 打招呼 会 说 ，Guten tag. 


4-9 使 用 :lang 伪 类 (Firefox 浏览 器 ) 


4.6 与 元 素 关系 相关 的 选择 符 


4.6.1 后 代 选 择 符 


有 时， 网 页 设计 者 需要 为 某 个 元 素 的 某 种 类 型 的 后 代 元 素 指定 样式 ， 而 不 想 影响 该 元 素 之 
外 的 同类 型 元 素 ， 比 如 把 某 个 div 中 的 p 元 素 的 行距 设 为 标准 行距 的 1.5 倍 。 使 用 后 代 选 择 符 
就 可 以 做 到 ， 后 代 选 择 符 由 两 个 或 多 个 选择 符 组 成 ， 中 间 用 空格 分 隔 。 选 择 符 “A B” 将 匹配 
任何 是 A 的 后 代 的 B 元 素 。 

下 面 的 COHTML 代码 中 有 两 个 div 元 素 ， 每 个 有 唯一 的 ID 标识 且 各 包含 一 个 p 元 素 。 p 
分 别 是 两 个 div 的 子 元 素 ， 当 然 也 是 后 代 元 素 。 

«div id="weatherinfo"> 


<p> 今 日 天 气 : 晴 ; 最 高 气温 : 25 摄氏 度 ， 风力: 2-3 级 。</p> 


</div> 


CPN 
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«div id="datetime"> 
<p> 今 天 是 2008 年 8 月 8 日 。</p> 


</div> 
下 面 的 规则 将 天 气 部 分 文字 设 为 橙色 ,背景 为 蓝 色 ; 日 期 部 分 的 文字 设 为 白色 ， 背 景 设 为 
黑色 : 


div#weatherinfo p( 
color: orange; 
background-color: blue; 

) 

divédatetime p( 
color: white; 
background-color: black; 


) 
效果 如 图 4-10 所 示 。 


图 4-10 使 用 后 代 选 择 符 匹配 特定 元 素 


需要 说 明 的 是 ， 后 代 元 素 不 仅 包含 直接 子 元 素 ， 也 包含 任何 下 一 层次 的 元 素 ， 即 所 有 的 后 
代 。 所 以 不 管 元 素 风 套 次 数 有 多 少 ， 后 代 选 择 符 都 会 匹配 。 


4.62 子 选择 符 


与 后 代 选 择 符 类 似 ， 子 选择 符 只 匹配 那些 作为 某 个 特定 元 素 的 子 元 素 ， 但 不 包括 子 元 素 的 
子 元 素 。 子 选择 符 由 两 个 或 更 多 的 选择 符 组 成 ， 中 间 用 符号 “>” 分 阳 。 选 择 符 “A > B” 表 示 
匹配 那些 是 A 的 子 元 素 的 B 元 素 。 

下 面 这 个 例子 将 ID 为 notice 的 div 元 素 里 所 有 p 子 元 素 行距 设 为 普通 行距 的 1.5 fi: 

divénotice > p( 

line-height:1.5em; 
} 
子 选 择 符 也 可 以 与 后 代 选 择 符 组 合 使 用 ， 例 如 : 


div#middle div > pa { 
color:red; 
font-weight:bold; 
} 


其 中 ，a 是 p 的 后 代 元 素 ，p 是 div 的 子 元 素 ， 而 该 div 又 是 id 为 middle 的 div 的 后 代 元 
素 。 上 述 规则 会 匹配 下 面 的 a 元 素 : 


eM 


«div id-"middle"» 
«div id-"navigation"» 
<p> 欢 迎 访问 小 晖 子 工作 室 网 站 ， 点 击 <a href="http://www.huistd.com"> 此 处 </a> 
进行 浏览 。 
</p> 
</div> 
</div> 


最 终 效 果 是 使 链接 部 分 的 文字 为 粗 体 红字 。 


4.6.3 ”邻接 兄弟 选择 符 


邻接 兄弟 选择 符 的 形式 如 下 : El1+E2， 其 中 E2 是 要 选择 的 元 素 。 匹 配 该 选择 符 的 元 素 需 
要 满足 以 下 条 件 ，E1 和 E2 元 素 有 共同 的 父 元 素 且 El 是 E2 的 直接 前 驱 ， 即 El 是 紧 挨 在 E2 
之 前 的 那个 元 素 。 此 时 非 元 素 结 点 将 会 被 忽略 掉 ( 比 如 文本 结 点 或 注释 信息 )。 下 面 这 个 示例 使 
得 紧 挨 在 hl 元 素 之 后 的 p 元 素 项 部 有 10 个 像素 的 边 距 : 


hl + p( 
margin-top:l0px; 


) 


下 面 我 们 通过 一 个 更 为 具体 的 例子 来 体会 邻接 兄弟 选择 符 的 作用 。 考 虑 如 下 (X)HTML 
代码 : 


<dl> 
<qdt> 层 县 样 式 表 (CSS)</dt> 
<dd> 英 文 全 称 为 cascading Style Sheet， 由 W3C 创建 的 一 种 语言 ,用 于 描述 结构 化 文 
档 的 表达 效果 。</dd> 
<dd> 更 多 内 容 请 参考 : 
<a href-"http://www.w3.org/Style/CSS/"» 
http: //www.w3.org/Style/CSS/ 
</a> 
«/dd» 
<dt> 规 则 (rule)«/dt» 
«dd»css 中 指定 样式 的 指令 ， 由 选择 符 和 一 段 声明 组 成 。</dd> 
<dt> 选 择 符 (selector)«/dt» 
«dd»css 规则 的 一 部 分 ， 是 一 种 模式 ， 匹 配 应 用 样式 的 标记 元 素 。</dd> 
<dt> 声 明 (declaration)</dt> 
«dd»css 规则 的 一 部 分 ， 声 明 可 以 是 空 也 可 以 包含 一 种 或 多 种 样式 。 声 明 包 含 属性 名 和 属性 值 。 
</dd> 
<qdt> 属 性 (property)«/dt» 
«dd»1E (X) HTML 元 素 上 设置 的 一 个 量 ， 对 该 元 素 进行 样式 设计 。 属 性 具有 名 称 和 值 。</dd> 
</dl> 


下 面 的 样式 表 出 现 了 一 些 新 属性 : 
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body{ 
font-family:Arial, "fk"; 
font-size:small; 


} 

GELF 
font-weight: bold; 
font-size:1.2em; 

ia + dtl 
border-top: lpx solid black; 
padding-top:lem; 

} 

dt + dd( 

font-size:0.9em; 
padding-top:0.6em; 

) 

不 用 担心 ， 这 里 先 介绍 它们 的 含义 ， 后 面 的 章节 中 会 有 更 为 详细 的 介绍 。 

上 述 规则 首先 定义 body 元 素 所 使 用 的 字体 族 为 Arial 和 宋体 ， 字 号 为 small， 接 着 设 定 dt 
文字 为 粗 体 ， 大 小 为 1.2 个 单位 。 接 下 来 的 选择 符 选择 紧 挨 着 dd 元 素 后 的 dt 元 素 ， 设 置 上 边 
框 为 1 个 像素 宽度 、solid 样式 且 为 黑色 ， 接 下 来 的 属性 是 dt 元 素 上 方 填充 的 高 度 ， 这 里 设置 
为 1 个 单位 大 小 。 这 条 规则 在 页 面 上 显示 的 效果 就 是 每 条 术语 之 问 有 一 条 水 平 线 和 一 定 的 空隙 。 
最 后 一 条 规则 选择 紧 挨 在 dt 后 的 dd 元 素 ， 设 定 字体 大 小 为 0.9 个 单位 ， 上 方 填充 0.6 个 单位 。 
如 图 4-11 所 示 为 正 7 显示 的 结果 。 


CSS 术 语 表 


层 琶 样式 表 (CSS) 
英文 全 称 为 Cascading Style Sheet, 由 W3C 创 建 的 一 种 语言 ,用 于 描述 结构 化 文档 的 表达 效果 。 
更 多 内 容 请 参考 ，http//www.w3.org/Style/CSS/ 


规则 (rule) 
CSs 中 指定 样式 的 指令 ,由 选择 符 和 一 段 声 明 姐 成 。 


选择 符 (selector) 
CSs 规 则 的 一 部 分 ， 是 一 种 模式 ， 吕 了 配 应 用 样式 的 标记 元 素 。 


声明 (decleration) 
CSS 规 则 的 一 部 分 ， 声 明 可 以 是 空 也 可 以 包含 一 种 或 多 种 祥 式 。 声 明 包 含 属性 名 和 属性 值 。 


属性 (property) 
在 COHTML 元 素 上 设置 的 一 个 量 ， 对 该 元 素 进行 样式 设计 。 导 性 具有 名 称 和 值 。 


4-11 使 用 邻接 兄弟 选择 符 选 择 特定 元 素 (IE7 浏览 器 ) 
图 注意 : 以 上 提 到 的 子 选择 符 和 邻接 兄弟 选择 符 在 IE6 中 均 不 识别 .为 了 获得 最 大 兼容 性 ， 
应 尽量 使 用 后 代 选 择 符 ， 如 果 还 得 不 到 所 需 的 效果 ， 只 好 手动 添加 class 属性 并 
使 用 class 选择 符 。 
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42 属性 选择 符 


本 章 最 后 一 节 我 们 介绍 属性 选择 符 ， 它 可 以 说 是 CSS 选择 符 里 使 用 最 为 灵活 的 一 种 。 通 
过 它 我 们 就 可 以 选择 那些 具有 某 种 属性 的 所 有 元 素 ， 将 样式 应 用 到 其 中 。 


4.7.1 属性 选择 符 的 匹配 方式 


CSS 允许 我 们 针对 元 素 的 某 个 属性 进行 选择 ， 属 性 选择 符 的 匹配 方式 有 以 下 4 种。 

e [att]: 匹配 任何 使 用 att 属性 的 元 素 ， 不 管 其 属性 取 值 如 何 。 

€  [att-val]: 匹配 att 属性 值 为 val 的 元 素 。 

€  [at--val]: 匹配 满足 以 下 条 件 的 元 素 : 元素 的 att 属性 的 值 需 是 一 个 由 空格 分 隔 的 单 
词 列表 ， 其 中 一 个 单词 必须 是 val。 若 要 使 用 该 选择 符 ，val 值 不 能 包含 空格 ， 否 则 会 


被 视 为 多 个 单词 。 
© [att=val]: 匹配 满足 以 下 条 件 的 元 素 ; 元 素 的 att 属性 的 值 需 是 一 个 由 连 字符 “-” 分 


隔 的 单词 列表 ，val 是 其 中 的 第 一 个 单词 。 


© 注意 : 属性 选择 符 使 用 起 来 灵活 度 很 高 ， 但 遗憾 的 是 IE6 及 以 前 的 版 本 不 支持 属性 选择 
符 。 为 了 获得 最 大 兼容 性 ， 只 能 给 元 素 附加 class 属性 ， 在 CSS 中 附加 class 选择 
符 并 填写 相应 的 样式 。 


4.7.2 ”属性 选择 符 示例 


表 4-1 列举 了 一 些 属性 选择 符 和 一 些 (X)HTML 元 素 ， 并 指出 是 否 匹配 。 
表 4-1 属性 选择 符 匹配 测试 


CSS 选择 符 (X)HTML 片段 是 否 匹配 


"ang 是 
m s 
table[riles-"cols* 是 
table[rules=" cols” 是 
table[rules|-*cols"] <table rules=“cols”> 是 
span[class=bar] <span class="foo bar’> 是 
span[class~="bar”] <span class-"foo bar 是 
span[class|-"bar"] «span class="foo bar 否 
[lang-"zh"] <p lang=“zh"> 是 
[lang-—"zh"] <p lang=“zh"> 是 
[lang|-"zh"] <p lang-"zh'— 是 


" 
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CSS 选择 符 (XHTML 片段 是 否 匹 配 


[lang-"zh"] <p lang-"zh-cn f 


[lang-—"zh"] <p lang-"zh-cn 否 


[langi-zh"] <p lang-zh-cn"» 是 


下 面 看 一 个 使 用 属性 选择 符 的 具体 例子 。 假 设 你 需要 在 页 面 里 添加 一 些 文件 下 载 的 链接 ， 
你 想 通 过 使 用 不 同 图 片 来 标识 不 同类 型 的 文件 。 (XHTML 的 a 元 素 表示 一 个 链接 , 它 有 个 type 
属性 ， 该 属性 指明 链接 所 指 内 容 的 类 型 ， 我 们 可 以 赋 给 该 属性 表明 文件 类 型 的 属性 值 ， 再 使 用 
属性 选择 符 匹 配 相 应 的 链接 元 素 。 

事先 要 准备 好 4 张 表示 不 同文 档 类 型 的 图 片 ， 命 名 为 typedoc.gif. typepdfgif. typexls.gif 
和 typetxt.gif， 它 们 分 别 表示 Word 文档 、PDF X-Fi. Excel 文档 和 文本 文档 。 

COHTML 代码 如 下 : 

<h1> 勘 误 表 下 载 ， 请 选择 适合 你 的 文档 类 型 。</h1> 

<a href-"errata.doc" type="doc"> 下 载 </a> (Word 文档 格式 ) <br /> 

<a href-"errata.pdf" type="pdf"> 下 载 </a> (PDF 格式 文档 )<br /> 

«a href-"errata.xls" type="xls"> 下 载 </a> (Excel 格式 文档 ) «br /> 

«a href-"errata.txt" type="txt"> 下 载 </a> (文本 文档 ) 


CSS 代码 如 下 : 


body{ 
font-size:small; 
font-family:"Times New Roman", "宋体 "; 


font-size:140%; 


padding-left:40px; 
padding-top:10px; 
padding-bottom:10px; 
height:40px; 
font-size:small; 
line-height:3em; 
background-position:left; 
background-repeat:no-repeat; 
} 
a[type-"doc"]( 
background-image:url (typedoc.gif); 
} 
a[type-"pdf"]( 
background-image:url (typepdf.gif); 
) 
a[type-"xls"]( 
background-image:url(typexls.gif); 


c 


} 
a[type-"txt"][ 

background-image:url (typetxt.gif); 
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最 终结 果 如 图 4-12 所 示 。 
勘误 表 下 载 ， 请 选择 适合 你 的 文档 类 型 。 
fei Ta wae 
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4-12 ”通过 属性 选择 符 设置 特定 的 样式 (Firefox 浏览 器 ) 


G 延伸 :下 面 的 网 址 总 结 了 目前 各 种 流行 的 浏览 器 对 不 同 版 本 的 CSS 选择 符 的 支持 程度 : 
http://www.quirksmode.org/css/contents.html 


48 小 结 


本 章 介绍 了 CSS 规则 中 比较 重要 的 部 分 : 选择 符 。 它 指明 了 页 面 中 哪些 元 素 应 用 样式 。 
-个 简单 选择 符 包含 一 个 类 型 选择 符 或 一 个 通用 选择 符 ， 后 面 跟 有 0 个 或 多 个 id 选择 符 、 

属性 选择 符 或 伪 类 ， 三 者 的 顺序 可 以 任意 。 一 个 选择 符 由 一 个 或 多 个 简单 选择 符 组 成 ， 中 间 用 
连接 符 相隔 。 连 接 符 可 以 是 空白 、 大 于 号 C>) 或 者 加 号 (+)， 空 白 可 以 出 现在 连接 符 和 其 周围 的 
简单 选择 符 之 间 。 

通用 选择 符 可 以 在 任何 元 素 上 设置 样式 ， 类 型 选择 符 用 来 匹配 GX)HTML 中 的 特定 元 素 ; 
class 和 id 选择 符 根 据 元 素 的 class 属性 和 id 属性 来 选择 。 合 理 使 用 和 命名 class 和 id 属性 会 提 
高 开发 效率 ， 减 少 维护 的 工作 量 。 

伪 元 素 和 伪 类 可 以 选择 一 些 实际 并 不 存在 的 元 素 。 后 代 选 择 符 、 子 选择 符 和 邻接 兄弟 选择 
符 会 根据 元 素 的 层次 结构 进行 匹配 。 属 性 选择 符 匹 配 那 些 满足 指定 要 求 的 元 素 。 

在 下 一 章 中 ， 我 们 将 会 介绍 有 关 CSS 度量 的 内 容 。 


第 5 章 CSS 中 的 度量 


每 一 条 CSS 的 声明 都 包含 了 属性 和 属性 值 ， 从 背景 颜色 到 字体 大 小 ， 从 元 素 高 度 到 段落 
行距 ,丰富 多 彩 的 样式 都 是 依靠 赋予 属性 不 同 的 值 来 实现 的 。 不 同 的 属性 可 能 需要 不 同类 型 的 
属性 值 ， 比 如 长 度 定义 用 整数 ， 字 体 定 义 用 字符 ， 有 关 颜 色 的 定义 用 颜色 关键 字 或 RGB 颜色 
值 。 有 些 属性 值 还 需要 添加 适当 的 单位 。 

本 章 将 介绍 CSS 属性 值 所 使 用 的 各 种 值 类 型 及 其 所 带 单位 的 含义 和 使 用 方法 。 

本 章 主要 内 容 
CSS 中 度量 的 概念 
CSS 中 的 值 
CSS 中 值 的 单位 
相对 单位 和 绝对 单位 


5.1 值 的 类 型 
在 定义 样式 表 时 ， 不 同属 性 所 需 的 属性 值 的 类 型 也 可 能 会 不 同 ， 下 面 对 各 种 值 逐 一 介绍 。 


5.1.1 整数 和 实数 


整数 和 实数 都 是 以 十 进 制 形式 表示 的 。 例 如 : 


div#adv{ 
z-index:999; 


} 


数值 前 均 可 以 添加 “+” 和 “-” 符 号 ， 表 示 正 负 。 一 些 属 性 要 求 整数 或 实数 值 必需 限定 在 
- 定 范围 内 ， 比 如 非 负 数 。 


5.1.2 长度 


长 度 是 水 平 或 垂直 方向 的 度量 ， 由 数值 类 型 加 一 个 单位 (如 px、em 组 成 ， 当 长 度 为 零 时 ， 
单位 可 以 省 略 不 写 。 例 如 : 
p.normal( 
font-size:12px; 
width:300px; 
H 


有 些 属性 允许 使 用 负 长 度 ， 但 这 会 增加 样式 设计 的 复杂 度 ， 也 会 影响 兼容 性 。 若 属性 不 支 


cM 


持 负 长 度 ， 则 该 条 声明 会 被 忽略 。 有 关 单 位 的 用 法 在 下 一 节 讲 解 。 


5.1.3 ”百分数 


百分数 由 数值 加 百 分 号 “%” 组 成 。 百 分 数 通 常用 来 表示 另 一 个 数值 的 相对 值 ， 这 个 基 值 
可 能 位 于 同一 元 素 的 其 他 属性 中 ， 也 可 能 位 于 某 个 祖先 元 素 中 。 例 如 : 
p#copyright{ 
font-size:12px; 
$ 
pfcopyright( 
line-height:150$; /* font-size 属性 值 的 1.5 倍 , 即 18px */ 
$ 
以 上 规则 首先 确定 了 字体 大 小 为 12px， 然 后 确定 行距 为 130%， 这 个 百分数 就 是 相对 于 同 
-个 元 素 的 font-size 属性 的 。 那 么 该 行距 大 小 应 为 12 x 15096 = 18px。 


5.1.4 URL 或 URI 


由 “url(” 加 任意 数量 的 空白 ， 加 可 选 的 单 引号 (9 或 双 引 号 (9， 后 跟 URI， 再 加 上 对 应 的 
单 引号 (或 双 引号 0) 及“)” 构 成 。URI 即 可 为 绝对 地 址 也 可 为 相对 地 址 ， 例 如 : 
div#top{ 
background-image:url (http://www.huistd.com/images/logo.jpg); 
} 
div#top{ 


background-image:url (images/logo.jpg); 


} 


5.1.5 颜色 
颜色 值 可 以 是 CSS 规范 中 定义 的 表示 颜色 的 关键 字 ， 或 者 由 RGB 值 表示 。 
1. 关键 字 表 示 


CSS 2.1 规范 提供 了 17 种 表示 颜色 的 关键 字 (如 表 5-1 所 示 )。 
比如 你 希望 一 段 文本 的 颜色 为 灰色 ， 背 景色 为 黑色 ， 则 需 编写 如 下 代码 : 
pt 

color:gray; 

background-color:black; 
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表 5-1 17 种 颜色 的 关键 字 和 对 应 的 RGB 值 


关键 字 RGB 值 说 明 
aqua #00FFFF 水 绿色 ， 浅 绿色 ( 浅 蓝 绿色 至 淡 绿 蓝 色 ) 
black #000000 黑色 
blue #0000FF 蓝 色 
fuchsia #FF00FF 深 紫红 色 
gra #808080 灰色 
green #008000 绿色 
lime #00FF00 浅 绿色 
maroon #800000 栗色 ( 暗 红 棕色 到 上 暗 紫 红色 ) 
navy #000080 藏青 色 
olive #808000 橄榄 色 ( 一 种 低 到 中 等 尖 亮度 和 低 至 中 等 饱和 度 的 黄 绿色 ) 
orange #FFA500 橙色 
purple #800080 紫色 
Ted #FF0000 红色 
silver #COCOCO 银白 色 
teal #008080 鬼 蓝 ， 深 青色 (适度 或 深 色 的 带 蓝 色 的 绿色 到 呈 绿 色 的 蓝 色 ) 
white #FFFFFF 白色 
ellow #FFFF00 黄色 


目前 IE, Firefox, Opera 等 主流 浏览 器 还 支持 X11 颜色 。 它 来 自 于 X Window 系统 ， 它 提 
供 了 100 多 个 颜色 名 称 ( 如 lightpink、lightseagreen 等 ), 这 些 名 称 已 经 作为 CSS3 规范 的 一 部 分 。 
详细 的 颜色 名 称 和 所 对 应 的 颜色 值 列表 可 参考 CSS3 颜色 模块 的 规范 : 


http://www.w3.org/TR/css3-color/ 


2. RGB 表示 

RGB 表示 红 (Red)、 绿 (Green)、 蓝 (Blue) 三 种 色光 原色 。 — (6 GARE H EA SEPURÉ, Jc Cs 
的 数值 越 高 ， 色 彩 越 明 亮 。 每 个 原色 在 0-255 之 间 进 行 取 值 ，R、G、B 都 为 0 时 是 黑色 ， 都 
为 255 时 是 白色 。 如 图 5-1 所 示 为 RGB 色彩 模型 。 


R G B 


图 5-1 RGB 色彩 模型 ( 取 自 Adobe 网 站 ) 


RGB 是 计算 机 中 最 直接 的 色彩 表示 方法 。 显 示 器 的 24 位 真 彩 图 像 ， 就 是 采用 RGB 模型 
来 精确 记录 色彩 的 。 因 此 ，CSS 也 提供 了 这 种 方式 来 设置 颜色 ， 具 体 方式 有 以 下 4 种 : 

(1) #RRGGBB: 每 种 颜色 值 用 十 六 进 制 表 示 ， 数 值 从 00 到 FF( 字 母 大 小 写 均 可 )。 数 值 前 
要 加 井 号 “#”。 例 如 : 


pícolor:$000000;] /* 黑色 */ 
pícolor:£$FFFFFF;] /* 白色 */ 
p(color:£55A3EB;] /* 一 种 蓝 色 */ 


Q) #RGB: X#RRGGBB 的 简写 形式 ， 例 如 #CCCCCC 可 简写 为 #CCC，#DD4455 可 简写 
为 #D45。 


p{color:#000;} /* 相当 于 #000000， 黑 色 */ 
p{color:#453;} /* 相当 于 #445533， 一 种 暗 绿 色 */ 


G) RGB( 十 进 制 数值 , 十进制 数值 , 十进制 数值 ): 每 种 颜色 值 用 十 进 制 表示 ， 数 值 从 0 
到 255。 例 如 : 


p{RGB (255, 45, 6);} /* 一 种 红色 */ 
p(RGB(20, 200, 120);) /* 一 种 蓝 绿色 */ 


(4) RGB( 百 分 数 ， 百 分数， 百分数 ): 每 种 颜色 值 用 百分数 表示 ， 数 值 从 0% 到 10096, 
例如 : 


p{RGB (50%，50%，50%);} /* 灰色 */ 
p{RGB(30%, 4%, 99%);}  /* 一 种 蓝 色 */ 


5.46 FFR 


字符 串 既 可 用 双 引 号 也 可 用 单 引 号 表示 ， 字 符 串 中 的 引号 需要 用 转 义 字符 “\”。 字 符 串 
不 仅 会 出 现在 声明 中 ， 还 会 出 现在 选择 符 中 ， 例 如 : 
hl#hint:before{ 
content: "提示 : "; 
) 
pt 
font-family: "Rik", "Courier New"; 
H 
a[title-"a special title"]( 
text-decoration:none; 
H 
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上 一 节 介 绍 了 CSS 中 值 的 类 型 ， 其 中 表示 长 度 的 值 需要 有 单位 (长 度 为 0 时 单位 可 以 省 略 
不 写 )。 长 度 单位 分 为 两 种 : 表示 绝对 长 度 的 单位 和 表示 相对 长 度 的 单位 。 绝 对 长 度 单位 一 般 
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在 输出 媒介 的 物理 大 小 已 知 的 情况 下 才 使 用 ,而 使 用 相对 长 度 单位 的 长 度 值 是 根据 另 一 个 长 度 
值 定义 的 。 


5.2.4. 表示 绝对 长 度 的 单位 


当 输 出 媒介 的 物理 属性 已 知 时 ， 绝 对 单位 才 会 有 用 处 ， 绝 对 单位 包括 : 
in(inch， 英 寸 ，1 英寸 等 于 2.54 厘米 ) 
cm(centimeter， 厘 米 ) 
mm(millimeter， 毫 米 ) 
pt(point， 点 ，CSS 2.1 规范 中 定义 的 点 相当 于 1/72 英寸 ) 
€  pc(pica, 12 点 字 ， 相 当 于 12 点 ) 
如 果 知 道 显 示 器 屏幕 到 底 有 多 大 ， 或 者 你 的 页 面 仅仅 通过 打印 输出 ， 你 就 可 以 使 用 绝对 单 
位 ， 但 并 不 是 所 有 计算 机 都 知道 屏幕 大 小 ， 所 以 绝对 单位 在 实际 CSS 开发 中 极 少 使 用 到 ， 我 
们 还 是 看 看 相对 长 度 的 单位 吧 。 


5.22 ”表示 相对 长 度 的 单位 


由 相对 长 度 单位 定义 的 数值 是 由 某 个 基 值 计算 而 得 。 相 对 长 度 单位 包括 em、ex 和 px。 

单位 em 表示 元 素 自 身 font-size 属性 值 的 相对 值 , 但 是 ， 当 元 素 font-size 属性 值 也 采用 em 
作为 单位 时 ， 这 个 值 就 是 其 父 元 素 font-size 属性 的 相对 值 了 。 

下 面 举 例 说 明 : 


p#first { 
font-size:12px; 
line-height:1.2em; 

} 

p#second { 
font-size:12px; 
line-height:2.5em; 

} 


«p id-"first"»TopStyle 是 一 款 CSS 编辑 软件 ， 可 以 帮助 我 们 编写 符合 包括 CSS2 标准 在 内 的 样式 
表 。Topstyle 具有 css 定义 选择 功能 , 让 你 可 以 选取 特定 的 浏览 器 或 css 阶层 、 内 建 的 样式 表 检 查 器 、 
内 部 的 预览 能 力 、 以 颜色 标示 的 编辑 器 ， 以 及 样式 预览 。</p> 

«p id-"second"»Topstyle 是 一 款 css 编辑 软件 ， 可 以 帮助 我 们 编写 符合 包括 CSS2 标准 在 内 的 样 
AX. TopStyle 具有 css 定义 选择 功能 ,让 你 可 以 选取 特定 的 浏览 器 或 Css 阶层 、 内 建 的 样式 表 检 查 
器 、 内 部 的 预览 能 力 、 以 颜色 标示 的 编辑 器 ， 以 及 样式 预览 。</p> 


规则 规定 字体 大 小 为 12px, 两 个 p 元 素 的 行距 分 别 为 字体 大 小 的 1.2 倍 和 2.5 倍 (行距 是 指 
- 行 的 顶端 与 下 一 行 顶 端的 距离 )。 
显示 效果 如 图 5-2 所 示 。 


TopStyle 是 一 款 CSS 编 辑 软 件 ,可 以 帮助 我 们 编写 符合 包括 Css2 标 准 在 内 的 
样式 表 。TopStyle 具 有 CSS 定 义 选 择 功能 ， 让 你 可 以 选取 特定 的 浏览 器 或 
人 内 部 的 预览 能 力 、 以 颜色 标示 的 编辑 器 ， 
D» 览 。 


TopSty1e 是 一 款 Css 编 辑 软 件 ， 可 以 帮助 我 们 编写 符合 包括 CSs2 标 准 在 内 的 
样式 表 。TopsStyle 具 有 CSs 定 义 选择 功能 ， 让 你 可 以 选取 特定 的 浏览 器 或 
5ss 阶 层 、 内 建 的 样式 表 检 查 器 、 内 部 的 预览 能 力 、 以 颜色 标示 的 编辑 器 ， 
以 及 样式 预览 
图 5-2 行距 的 大 小 是 字体 大 小 的 相对 值 
再 看 一 个 例子 。 


body( 
font-size:small; 


) 
pffstline( 
font-size:lem; 


) 

pfsecline( 
font-size:1.5em; 

) 

pfsthrdline( 
font-size:3em; 


) 


<p> 这 是 基准 大 小 。</p> 

«p id="fstline"> 这 是 1 倍 大 小 文字 。</p> 
<p id="secline"> 这 是 1.5 倍 大 小 文字 。</p> 
<p id="thrdline"> 这 是 3 倍 大 小 文字 。</p> 


效果 如 图 5-3 所 示 。 
这 是 基准 大 小 。 
这 是 1 信 大 小 文字 。 
这 是 1. 5 倍 大 小 文字 。 


MM E Loy. V 
这 是 3 倍 大 小 文字 。 
5-8 pp 元 素 的 font-size 属性 值 是 相对 于 body 的 font-size 属性 值 的 


body 元 素 的 字体 大 小 为 small， 所 以 第 一 个 p 元 素 中 的 文字 大 小 也 为 small。 在 图 5-2 中 ， 
1 倍 大 小 文字 与 父 元 素 body 的 文字 大 小 值 small 相当 ， 其 余 两 行文 字 的 大 小 分 别 是 该 基准 值 
的 1.5 倍 和 3 fi. 
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使 用 em 作为 单位 的 数值 在 小 数 点 后 面 可 以 拥有 三 个 有 效 位 ， 另 外 通过 em 单位 可 以 达到 

外 部 元 素 根据 内 部 元 素 大 小 动态 变化 的 效果 。 

È 提示 :， 若 开发 人 员 没有 设 定 基准 值 ,那么 lem 表示 的 就 是 浏览 器 默认 的 一 个 单位 的 字符 
大 小 。 大 多 数 浏览 器 默认 字体 大 小 为 16px， 因 此 在 未 给 定 基准 值 的 情况 下 设置 
font-size 属性 为 lem 时 ， 文 字 大 小 就 是 16px。 

ex 表示 相对 于 字符 “x” 的 高 度 。 这 个 值 会 随 着 x 的 字体 大 小 和 字体 族 的 不 同 而 不 同 。 如 

图 5-4 所 示 是 在 font-size 属性 为 25px 时 ， 各 个 字体 的 x 字符 的 高 度 值 。 


xin Arial (13px) 

X in Courier New (llpx) 
x in Verdana (14px) 

x in Tahoma (14px) 

x in Times New Roman (12px) 


x in Georgia (12px) 


5-4 不 同 字体 的 x 字符 的 高 度 (数值 标注 在 后 面 的 括号 中 ) 


在 下 面 的 示例 中 ， 两 个 段落 将 分 别 使 用 两 种 不 同 的 字体 ， 其 x 字符 的 高 度 不 同 ， 因 此 使 用 
ex 单位 所 产生 的 效果 也 会 有 所 不 同 : 


pt 
width:200px; 
margin:0 10px; 
) 
pfparal( 
font-family:Tahoma; 
height:20ex; 
float:left; 
background-color:£FFCC99; 
} 
p#para2{ 
font-family:"Times New Roman"; 
height:20ex; 
float:left; 
background-color :#FFCC99; 
} 


<p id="paral">Matrix: A situation or surrounding substance within which 
something else originates, develops, or is contained.</p> 
<p id="para2">Matrix: A situation or surrounding substance within which 
something else originates, develops, or is contained.</p> 


最 终 效果 如 图 5-5 所 示 (Firefox 浏览 器 )。 


Xx 字符 高 度 为 Tpx 
Xx 字符 高 度 为 9px 
了 元 素 高 度 为 180px 了 元 素 高 度 为 140px 


5-5 单位 为 ex 的 属性 值 是 字符 x 高 度 的 相对 值 (Firefox 浏览 器 ) 


第 一 个 段落 使 用 Arial 字体 ,字符 x 的 高 度 为 9 个 像素 , 因此 第 一 个 p 元 素 的 高 度 为 20x9px 
=180px， 第 二 个 段落 使 用 Times New Roman 字体 ， 字 符 x 的 高 度 为 7 个 像素 ， 因 此 该 p 元 素 
的 高 度 为 20x7px =140px。 尽 管 两 个 p 元 素 的 高 度 均 是 20ex， 但 由 于 字符 x 的 高 度 不 同 ， 导 致 
T p 元 素 的 高 度 也 不 相同 。 

最 后 一 个 表示 相对 长 度 的 单位 就 是 像素 了 。 像 素 是 相对 与 显示 设备 的 分 辨 率 。 常 见 的 显示 
器 分 辨 率 有 1024x768、1280x1024、1280x800 等 。 一般 情 况 下 ， 当 页 面 需要 精确 控制 其 大 小 时 ， 
都 使 用 像素 作为 其 元 素 的 单位 。 有 些 站 点 的 元 素 会 随 着 浏览 器 分 辩 率 的 变化 而 变化 ， 因 而 可 能 
会 使 用 em 或 百分比 一 类 的 单位 。 

有 些 读者 可 能 不 太 理解 ， 为 什么 将 像素 视 为 相对 单位 呢 ? 对 于 每 个 显示 设备 来 说 ， 像 素 的 
大 小 是 固定 不 变 的 , 但 是 在 多 个 尺寸 不 同 却 拥有 相同 分 辩 率 的 设备 之 间 ， 一 个 像素 的 大 小 就 是 
变化 的 。 也 就 是 说 一 个 边 长 为 100px 的 正方 形 区 域 显示 在 尺寸 不 同 的 设备 上 时 ,实际 的 大 小 是 
有 差异 的 。 尽 管 如 此 ， 在 大 部 分 情况 下 ， 你 仍然 可 将 px 视 为 一 个 绝对 单位 。 


5.3 小 结 


每 条 有 效 的 CSS 规则 至 少 包 含 一 条 声明 ， 而 声明 中 必须 包含 属性 和 属性 值 。CSS 正 是 通 
过 给 属性 赋予 不 同 的 属性 值 才 使 得 (X)HTML 代码 能 呈现 出 千变万化 的 样式 。 值 和 单位 是 CSS 
的 核心 内 容 之 一 ， 掌 握 它们 对 进一步 使 用 好 CSS 起 着 相当 重要 的 作用 。 

CSS 中 的 值 类 型 包括 整数 、 实 数 、 长 度 、 百 分 数 、URI 和 URL、 颜 色 、 字 符 串 。 一 些 属性 
要 求 属性 值 (长 度 值 ) 带 有 单位 ，CSS 中 的 单位 分 为 表示 绝对 长 度 和 相对 长 度 两 大 类 。 绝 对 单位 
一 般 用 于 打印 机 等 设备 ， 相 对 长 度 通常 用 于 显示 设备 ， 其 中 em 和 px 较 常 使 用 。 

下 一 章 将 向 读者 介绍 CSS 中 的 层 登 和 继承 的 概念 。 


eg 


e 


a 


第 6 章 层 芭 和 继承 


CSS 中 处 处 存在 继承 ， 它 非常 重要 ， 既 给 开发 人 员 带 来 方便 也 带 来 麻烦 。 一 方面 它 减少 了 
样式 表 代 码 的 数量 ， 能 达到 事半功倍 的 效果 ; 另 一 方面 它 很 容易 被 错误 地 理解 和 使 用 ， 导 致 发 
生 混 乱 ， 所 以 从 开始 学 习 CSS 时 就 要 注意 这 些 问 题 。 

本 章 将 向 读者 介绍 CSS 中 继承 的 原理 ， 以 及 如 何 利用 继承 提高 开发 效率 。 接 着 会 介绍 
@import 规则 的 含义 和 用 途 、 选 择 符 的 确定 度 以 及 层 登 样式 表 中 层 登 的 具体 含义 。 

本 章 主 要 内 容 
什么 是 继承 
继承 的 作用 和 局 限 
使 用 指定 继承 
(Qimport 规则 
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6.1.1 什么 是 继承 


简单 地 说 ，CSS 中 的 继承 就 是 指 某 个 (X)HTML 元 素 拥有 的 某 些 样式 会 传递 给 它 的 所 有 后 
代 元 素 。 比 如 一 般 情况 下 页 面 中 的 p 元 素 是 body 的 后 代 ， 所 以 body 元 素 所 拥有 的 部 分 样式 也 
会 被 p 元 素 继承 下 来 。 继 承 给 开发 人 员 节省 了 大 量 的 时 间 ， 和 否则 页 面 所 有 的 元 素 都 要 设置 一 遍 
重复 的 样式 信息 。 下 面 这 个 示例 就 利用 了 CSS 的 继承 性 质 。 

COHTML 代码 : 

<hl>Adobe Dreamweaver 简介 </hl> 

<p> 

<strong>Adobe Dreamweaver</strong> 是 构建 Web 站 点 和 应 用 程序 的 专业 工具 。 它 将 可 视 布 局 工 

具 、 应 用 程序 开发 功能 和 代码 编辑 支持 组 合 在 一 起 ， 其 功能 强大 ， 使 得 各 个 层次 的 开发 人 员 和 设计 人 员 

都 能 够 快速 创建 界面 吸引 人 的 基于 标准 的 网 站 和 Web 应 用 程序 。 从 对 基于 css 的 设计 的 支持 到 手工 编码 

功能 ，Dreamweaver 提供 了 专业 人 员 在 一 个 集成 、 高 效 的 环境 中 所 需 的 工具 。</P> 


CSS 规则 只 给 body 元 素 指定 样式 : 


body{ 
font-family:Tahoma, Arial, "fk"; 
color:£666666; 

} 


页 面 中 的 hl fI p 元 素 是 body 的 后 代 元 素 ，p 元 素 中 的 strong 元 素 也 是 body 的 后 代 元 素 ， 
所 以 页 面 所 有 元 素 的 字体 族 和 颜色 属性 都 会 继承 祖先 元 素 body 的 样式 ， 结 果 如 图 6-1 所 示 。 


Adobe Dreamweaver 简介 


Adobe Dreamweaver 是 构建 Web 站 点 和 应 用 程序 的 专业 工具 。 它 将 可 视 布 局 工具 、 应 用 程序 开发 功能 和 代 
码 编辑 支持 组 合 在 一 起 ， 其 功能 强大 ， 使 得 各 个 层次 的 开发 人 员 和 设计 人 员 都 能 够 快速 创建 界面 吸引 人 的 基于 
标准 的 网 站 和 Web 应 用 程序 。 从 对 基于 CS5 的 设计 的 支持 到 手工 编码 功能 ，Dreamweaver 提 供 了 专业 人 员 在 一 
个 集成 高 效 的 环境 中 所 需 的 工具 。 


图 6-1 继承 产生 的 效果 


6.1[2 ”利用 继承 


继承 给 开发 人 员 带 来 了 极 大 的 方便 ， 减 少 了 宛 余 的 CSS 样式 代码 。 就 像 6.1.1 节 的 示例 所 
展示 的 那样 ， 通 过 给 body 元 素 指定 字体 族 属性 ， 页 面 所 有 元 素 均 会 继承 这 个 属性 值 ， 因 而 不 
必 为 每 个 元 素 单独 编写 字体 族 属 性 的 样式 代码 。 

你 还 可 以 利用 继承 性 给 页 面 某 一 部 分 区 域 指定 样式 。 比 如 ， 页 面 设计 人 员 通 常 把 div 元 素 
作为 容器 ， 把 页 面 划 分 成 几 个 区 域 (如 导航 区 、 主 要 内 容 区 、 次 要 内 容 区 和 底 脚 区 等 )， 区 域内 
所 包含 的 元 素 均 是 div 的 后 代 。 通 过 给 该 div 元 素 指定 样式 就 能 达到 指定 该 区 域内 所 有 元 素 样 
式 的 目的 。 例 如 下 面 的 示例 就 通过 指定 div 元 素 字 体 族 属性 、 字 号 大 小 和 颜色 等 ， 使 得 其 内 痢 
多 个 文字 段落 的 样式 达到 统一 。 最 终 效果 如 图 6-2 所 示 。 


图 6-2 利用 继承 将 样式 赋 给 子 元 素 ， 减 少 元 余 样 式 代码 


(X)HTML 代码 : 


<div id="footer"> 
<div id="copyright"> 
<p> 小 晖 子 工作 室 网 站 Copyright&copy; 2005-2006 版 权 所 有 </p> 
«p»E-mail:huistd8163.com«/p» 
«p»lli] ICP 4& 06016999 号 </P> 
«/div» 
«/div» 


CSS 代码 : 


div#footer{ 
font-family:Tahoma, Arial, "宋体 "; 
font-size:12px; 
text-align:center; 
color:£FFFFFF; 
background-color:$3F4C6B; 


margin:0; 


eM 
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6.1.3 所 有 的 规则 都 能 继承 吗 


继承 并 不 是 想象 的 那样 ， 后 代 元 素 会 继承 其 祖先 元 素 的 所 有 规则 。 而 是 只 有 部 分 CSS 规 
则 会 被 其 后 代 元 素 所 继承 。 就 拿 边框 (border， 详 见 第 7 章 ) 属 性 来 说 ， 父 元 素 的 边框 样式 并 不 
会 传递 给 它 的 后 代 元 素 ， 这 也 很 合理 ， 否 则 当 你 想 给 某 个 区 域 的 div 元 素 添加 上 一 个 边框 时 ， 
该 div 元 素 所 有 后 代 元 素 周围 均 会 有 个 边框 。 
假如 我 们 在 6.1.1 小 节 的 示例 中 给 body 元 素 添 加 一 个 黑色 1 像素 宽 的 实 线 边框 : 
body{ 
font-family:Tahoma, Arial, "宋体 "; 
Color:#666666; 
border:lpx solid black; 


由 于 边框 属性 不 被 其 后 代 元 素 继承 ， 所 以 结果 会 如 图 6-3 所 示 ， 只 有 body 元 素 周围 存在 


dobe Dreamweaver 简介 


lobe Dreamweaver 是 构建 Web 站 点 和 应 用 程序 的 专业 工具 。 它 将 可 视 布局 工具 、 应 用 程序 开发 功能 和 代 
凤 编 辑 支持 组 合 在 一 起 ， 其 功能 强大 ， 使 得 各 个 层次 的 开发 人 员 和 设计 人 员 都 能 够 快速 创建 界面 吸引 人 的 基于 | 


标准 的 网 站 和 Web 应 用 程序 。 从 对 基于 CSS 的 设计 的 支持 到 手工 编码 功能 ，Dreamweaver 提 供 了 专业 人 员 在 一 
个 集成 、 高 效 的 环境 中 所 需 的 工具 。 


6-3 body 元 素 的 border 样式 不 会 被 其 后 代 元 素 继承 
若是 所 有 属性 均 被 后 代 元 素 继承 ， 那 么 就 会 出 现 如 图 6-4 所 示 的 效果 。 


Adobe Dreamweaver 简介 


是 构建 Web 站 点 和 应 用 程序 的 专业 工具 。 它 将 可 视 布局 工具 、 应 用 程序 开发 功能 和 代 


网 编辑 支持 组 合 在 一 起 ， 其 功能 强大 ， 使 得 各 个 层次 的 开发 人 员 和 设计 人 员 都 能 够 快速 创建 界面 吸引 人 的 基于 | 
昧 准 的 网 站 和 Web 应 用 程序 。 从 对 基于 Css 的 设计 的 支持 到 手工 编码 功能 ，Dreamweaver 提 供 了 专业 人 员 在 一 
个 全 成 、 高 效 的 环境 中 所 需 的 工具 。 


图 6-4 假如 所 有 属性 均 能 被 后 代 元 素 继承 ， 页 面 上 会 到 处 都 是 边框 


那么 到 底 哪些 属性 支持 继承 ， 哪 些 不 支持 呢 ? 请 看 下 面 三 条 规则 : 

e 影响 元 素 位 置 ， 边 界 ， 背 景 和 边框 的 属性 不 会 被 继承 。 

o 浏览 器 会 使 用 它们 自己 的 继承 样式 来 格式 化 某 些 元 素 , 比如 标题 1~h6) 文 字 显 示 为 粗 
体 且 字体 较 大 ， 链 接 文字 (a 元 素 ) 的 颜色 为 蓝 色 等 。 这 些 元 素 相 应 的 属性 也 不 会 继承 
它们 祖先 元 素 的 属性 。 

e 当 样 式 继承 存在 冲突 时 ， 采 取 就 近 原则 。 后 代 元 素 会 继承 距离 自己 最 近 的 祖先 元 素 的 
相应 属性 。 

最 后 我 们 通过 一 个 实例 来 进一步 理解 以 上 三 条 规则 的 内 容 。 


COHTML 代码 : 


«div id="container"> 


<h1> 最 新 产品 </h1> 

<h2>Web Professional</h2> 

<p>Web Professional 是 一 款 <strong> 功 能 完备 的 可 视 化 的 web 开发 软件 </strong>， 
它 能 快速 地 创建 优美 的 web 页 面 ， 提 供 了 强大 的 网 站 管理 功能 。 欲 获 详情 请 点 击 <a 
href="webpro.html"> 此 处 </a>。</p> 

<h2>Web Express</h2> 

<p>Web Express 是 一 款 <strong> 轻 巧 的 可 视 化 web 开发 工具 </strong>， 使 用 它 可 快速 
创建 您 所 需要 的 web 页 面 。 欲 获 详情 请 点 击 <a href="webexpr.html"> 此 处 </a>。</p> 


</div> 
给 body 元 素 添加 如 下 样式 : 


body( 


} 


font-family:Tahoma, Arial, "宋体 "; 
font-size:0.7em; 

color:$A74500; 

text-align:center; 


规则 规定 了 字体 族 、 字 体 大 小 和 颜色 ， 并 要 求 文字 水 平 居中 ， 从 图 6-5 可 以 看 出 body 的 
后 代 元 素 p 完全 继承 了 这 些 规则 。strong 元 素 并 没有 独自 居中 。 而 hl 和 h2 元 素 只 继承 了 字体 
族 、 颜 色 和 文字 居中 的 属性 ， 它 内 部 文字 大 小 不 受 影响 。 链 接 文字 只 继承 了 字体 族 和 字体 大 小 
的 属性 ， 文 字 颜 色 不 受 影响 。 


最 新 产品 
Web Professional 


Web Professonal 是 一 款 功 能 完备 的 可 视 化 的 Web 开 发 软件 ， 它 能 快速 地 创建 惰 美 的 
Web 页 面 ， 提供 了 强大 的 网 站 管理 功能 。 褒 获 详 情 请 点 击 此 处 。 


Web Express 


Web Express 是 一 坎 茎 巧 的 可 视 化 Web 开 发 工具 ， 使 用 它 可 快速 创建 您 所 需要 的 Web 页 
面 。 窝 获 详 情 请 点 击 此 处 . 


6-5 ”后 代 元 素 h1、h2 和 a 不 会 全 部 继承 其 祖先 元 素 的 属性 


接 下 来 我 们 给 div M p 元 素 添 加 如 下 样式 : 


div#container{ 


border:lpx solid gray; 
width:260px; 
padding:lem; 
text-align:left; 


margin-left:2em; 


eM 
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即 给 div 元 素 添 加 1 个 像素 宽 的 实 线 灰 色 边框 ， 宽 度 固定 为 260 个 像素 ， 填 充 大 小 为 1 个 
单位 (前 面 讲 过 ， 这 里 1 个 单位 就 是 指 自身 文字 的 1 倍 大 小 )。 文 字 居 左 对 齐 。 根 据 就 近 原 则 ， 
div 内 的 元 素 将 继承 div 元 素 居 左 对 齐 的 属性 ， 因 为 div 比 body 元 素 更 靠近 这 些 元 素 ， 而 div 
元 素 自己 将 居中 显示 在 浏览 器 中 。 最 后 给 p JU BOE 2 个 单位 的 左边 距 ， 由 于 边 距 属性 不 会 被 
后 代 元 素 继承 ， 所 以 p 内 的 strong 元 素 并 没有 这 2 个 单位 的 边 距 。 最 终 效果 如 图 6-6 所 示 。 


FJ Ak - Microsoft Internet Explorer. 


Fie Edt View Favorites Toos Hep 
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最 新 产品 


Web Professional 


Web Professional 是 一 喜 功 能 完备 的 可 视 化 的 
Web 开 发 软件 ， 它 能 快速 地 和 了 梁 忧 美的 Web 
页 面 ,提供 了 强大 的 网 站 管理 功能 。 欲 玖 详 
情 请 点 击 此 处 、 


Web Express 


Web Express RB RE TS RT W A Web3E iÈ 
工具 ,使 用 它 可 快速 创建 您 所 需要 的 Web 页 
面 。 认 区 详情 请 点 击 此 处， 


© 注意 : 声明 “text-align:center; ”在 Firefox 浏览 器 中 对 div 元 素 并 不 起 作用 ， 你 可 以 使 
用 声明 “text-align:-moz-center; ”来 实现 居中 ， 但 这 时 在 IE 中 又 无 法 居中 。 一 
般 的 解决 方法 是 使 用 margin 属性 ， 给 需要 居中 的 元 素 添 加 两 条 声明 : 
“margin-left:auto;” 和 “margin-right:auto;”， 这 样 居中 效果 在 正和 Firefox 中 都 
可 以 正确 显示 了 。 


6.1.4 inherit 指定 继承 


CSS 中 的 每 个 属性 都 有 一 个 特定 值 “inherit”， 其 含义 就 是 指定 继承 父 元 素 的 相应 属性 值 。 
使 用 inherit 一 方面 在 代码 中 能 显 式 地 表明 要 继承 于 父 元 素 的 样式 属性 , 另 一 方面 也 使 子 元 素 继 
承 了 那些 不 会 被 自动 继承 的 属性 。 假 如 设计 者 要 使 ID 29 menu 的 div 元 素 有 2px 的 黑色 边框 ， 
且 具 有 Spx 的 填充 ， 同 时 想 让 其 子 div 元 素 也 具有 同样 的 样式 ， 则 可 以 编写 如 下 规则 (注意 , IE 
浏览 器 无 法 正确 显示 ): 

divimenu( 

border:2px solid black; 
padding:5px; 
background-color:4$909090; 


cM 


divimenu div( 
border:inherit; 
padding:inherit; 
background-color :#DEDEDE; 


6-7 ”使 用 inherit 显 式 继承 其 父 元 素 的 border 和 padding 属性 (Firefox 浏览 器 ) 
从 图 6-7 中 可 以 看 出 内 部 的 div 元 素 继承 了 父 元 素 的 border 和 padding 属性 。 


6.2 @import 规则 


CSS 中 的 @import 规则 允许 你 向 (X)HTML 文档 或 男 一 个 外 部 样式 表 文 档 中 添加 外 部 样式 。 
通过 这 种 方式 你 可 以 添加 附加 样式 到 相应 的 文档 中 。 实 际 上 @import 规则 的 设计 初衷 并 不 是 要 
在 (X)HTML 文档 中 使 用 ， 而 是 要 提供 一 种 将 一 个 或 多 个 样式 表 导 入 到 主 外 部 样式 表 的 方法 。 

@import 规则 的 使 用 方式 如 下 所 示 : 


Qimport url("stylesheetl.css"); 
Qimport url("stylesheet2.css"); 


其 中 url0 部 分 可 以 省 略 不 写 ， 若 要 严格 遵循 XHTML 规范 ， 引 号 不 能 省 略 ， 末 尾 的 分 号 不 
能 丢 。 以 下 4 种 写法 是 等 效 的 (注意 Firefox 浏览 器 不 支持 最 后 一 种 写法 ): 

Qimport url("stylesheetl.css"); 

Qimport url(stylesheetl.css); 


Gimport "stylesheetl.css"; 
Gimport stylesheetl.css; 


6.2.1 @import 规则 的 用 途 


- 些 低 版 本 的 浏览 器 不 支持 @import 规则 ， 它 们 会 忽略 这 条 规则 ， 因 此 导入 的 样式 也 会 
忽略 掉 。 另 外 , 正 浏览 器 支持 条 件 注释 ， 也 可 以 结合 @import 规则 和 条 件 注释 添加 一 些 针对 特 
定 浏览 器 的 样式 ， 比 如 下 面 这 段 取 自 微软 英文 首页 的 代码 就 利用 @import 规则 和 条 件 注释 给 版 
本 低 于 正 7 的 浏览 器 添加 特定 的 样式 : 


<style type="text/css"> 

Qimport url('http://i2.microsoft.com/shared/core/l/css/core.css'); 
</style> 
de E qp 
<style> 

Qimport url('http://i2.microsoft.com/shared/core/1/css/ie6.css'); 
</style> 
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E 


eurendik 
<style type="text/css"> 

Qimport url('http://i2.microsoft.com/shared/core/l/css/lsp.css'); 
</style> 


6.2.2 (import 规则 的 使 用 


下 面 这 段 代 码 是 将 外 部 样式 表 external.css 导入 到 (X)HTML 文档 中 ， 注 意 代码 位 于 <head> 
和 </head> 之 间 : 

<style type="text/css"> 

Gimport url("external.css"); 

<style> 

添加 到 样式 表 文档 中 就 更 简单 了 ， 只 需 一 行 代 码 : 

Gimport url("external.css"); 


需要 注意 的 是 , 不 论 @import 规则 出 现在 (X)HTML 文档 的 style 元 素 中 还 是 出 现在 CSS 文 
档 中 , 它 都 必须 写 在 所 有 其 他 CSS 规则 之 前 , 否则 @import 规则 导入 的 样式 信息 不 起 任何 作用 。 
比如 下 面 这 种 写法 就 使 得 external.css 中 的 任何 样式 属性 都 不 起 作用 : 

<style type="text/css"> 

body( 

background-color:white; 

) 

Qimport url("external.css"); 

</style> 


但 是 这 样 写 是 可 行 的 : 


<style type="text/css"> 

body{ 
background-color:white; 

} 

</style> 

<style type="text/css"> 

Qimport url("external.css"); 

</style> 


63 ” 层 琶 的 含义 


CSS 全 称 为 Cascading Style Sheet， 第 一 个 单词 Cascading 直译 为 层 释 或 级 联 ， 这 个 概念 看 
来 相当 重要 ， 以 致 于 该 语言 都 要 由 它 来 命名 ， 那 么 这 个 层 芭 的 具体 含义 是 什么 呢 ? 

页 面 所 使 用 的 样式 规则 可 能 有 不 同 的 来 源 ， 其 中 有 些 规则 由 Web 设计 者 提供 ， 有 些 由 用 
户 提 供 ， 有 些 又 是 由 浏览 器 提供 (比如 浏览 器 中 字体 颜色 默认 为 黑色 )。 这 三 种 来 源 不 同 的 样式 


可 能 会 存在 重复 、 相 互 冲突 的 内 容 ， 它 们 会 影响 页 面 中 的 同一 个 元 素 。 那 页 面 最 终 的 样式 取决 
于 哪 一 个 呢 ? 这 就 要 根据 层 琶 来 规定 。 

CSS 中 的 层 秋 是 一 种 规则 ， 它 分 配给 每 一 条 样式 规则 一 个 权 值 。 当 若干 规则 一 起 使 用 时 ， 
权 值 最 高 的 样式 将 会 起 作用 。 在 CSS 中 与 权 值 密切 相关 的 一 个 概念 就 是 确定 度 (Specificity)， 
下 面 就 来 介绍 它 。 


6.3.1 MER 


通过 CSS 选择 符 ， 我 们 可 以 有 多 种 方式 去 选 定 (X)HTML 元 素 。 有 时 可 能 会 出 现 多 个 样式 
直接 应 用 到 同一 元 素 上 的 情况 。 比 如 页 面 中 存在 这 样 一 段 (X)HTML 代码 : 

<p id-"paral" class="normal">...</p> 

p 元 素 的 id X paral, class 为 normal， 那 么 下 面 任何 一 条 规则 都 会 应 用 到 这 个 元 素 上 : 


p {color:red;} 

body p {color:silver;} 
p#paral {color:green;} 
p.normal {color:blue;} 


显然 ，p 元 素 中 文字 的 颜色 只 可 能 是 一 种 ， 那 么 它 到 底 取 决 于 哪 一 条 规则 呢 ? 这 是 由 选择 
符 的 确定 度 来 决定 的 。 每 种 CSS 选择 符 都 被 指定 了 一 个 确定 度 ， 当 若干 存在 冲突 样式 属性 的 
规则 应 用 到 同一 元 素 时， 确定 度 最 高 的 那 一 条 将 会 产生 效果 。 

选择 符 的 确定 度 由 4 位 逗号 相隔 的 数字 组 成 ， 形 式 为 0,0,0,0。 我 们 分 别 用 a、b、c 和 d 代 
表 这 4 位 数 。 这 4 位 数 的 确定 方法 如 下 : 

o ” 若 样 式 由 元 素 的 style 属性 确定 而 不 通过 选择 符 ， 将 a 置 1， 否 则 置 0。 

o HH id 选择 符 个 数 ， 赋 值 给 b。 

o 计算 属性 选择 符 或 伪 类 个 数 ， 赋 值 给 c。 

o 计算 类 型 选择 符 或 伪 元 素 个 数 ， 赋 值 给 do 

只 要 通过 比较 确定 度 的 大 小 就 可 以 判定 出 优先 级 最 高 的 规则 ， 比 较 方式 是 从 最 左 端的 a 位 
开始 逐 位 比较 ， 数 值 较 大 的 确定 度 就 高 ， 若 该 位 相等 则 比较 下 一 位 ， 以 此 类 推 。 现 在 你 可 以 试 
着 计算 下 列 规则 的 确定 度 ， 看 看 是 否 和 其 后 标注 的 数值 一 致 : 


/* a-0 b=0 c=0 d=0 -> 确定 度 = 0,0,0,0 */ 
pt /* a-0 b=0 c=0 d-1 -> 确定 度 = 0,0,0,1 */ 
p:first-line {} /* a-0 b-0 c-0 d-2 -> 确定 度 = 0,0,0,2 */ 
ul li (]) /* a-0 b-0 c-0 d-2 -> 确定 度 = 0,0,0,2 */ 
ul ol+li () /* a-0 b-0 c-0 d-3 -> 确定 度 = 0,0,0,3 */ 
hl + *[lang-zh]()  /* a-0 b=0 c-1 d-1 -> 确定 度 = 0,0,1,1 */ 
ul ol li.red {} /* a-0 b=0 c-1 d-3 -> 确定 度 = 0,0,1,3 */ 
li.red.level {} /* a-0 b-0 c-2 d-1 -> 确定 度 = 0,0,2,1 */ 
header {} /* a-0 b-1 c-0 d-0 -> 确定 度 = 0,1,0,0 */ 
style-"" /* a=1 b=0 c=0 d=0 -> 确定 度 = 1,0,0,0 */ 


从 确定 度 的 计算 规则 来 看 ， 内 联 样式 的 优先 级 最 高 ， 且 在 一 般 情况 下 ， 选 择 符 的 特定 性 越 
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高 ， 它 的 优先 级 也 越 高 。 我 们 现在 来 计算 一 下 本 节 开 始 提 到 的 4 条 规则 的 确定 度 ， 看 看 到 底 哪 
-条 规则 的 优先 级 最 高 : 
p {color:red;} /* a-0 b-0 c=0 d-1 -> 确定 度 = 0,0,0,1 */ 
body p (color:silver;] /* a-0 b=0 c=0 d=2 -> 确定 度 = 0,0,0,2 */ 
p#paral (color:green;] /* a-0 b-1 c=0 d-1 -> 确定 度 = 0,1,0,1 */ 
p.normal (color:blue;] /* a-0 b-0 c-1 d-1 -> 确定 度 = 0,0,1,1 */ 


ID 选择 符 的 确定 度 最 高 ， 因 此 p 元 素 中 文字 颜色 为 绿色 。 


6.3.2 !important 声明 


有 时 ， 你 并 不 希望 浏览 器 按照 选择 符 的 确定 度 来 决定 某 些 样式 属性 的 优先 级 。CSS 2.1 提 


供 了 一 个 “!important” 声 明 (由 叹 号 和 单词 important 组 成 )， 拥 有 该 声明 的 属性 比 其 他 任何 没 
有 该 声明 的 属性 的 优先 级 都 要 高 。 使 用 时 将 “!important” 声 明 放 置 在 样式 声明 的 属性 值 与 表示 
结束 的 分 号 之 间 ， 比 如 : 


p (color: red '!important;] 


请 看 下 面 的 示例 。 


X)HTML 代码 : 

<h2 id-"articleTitle" class="highlighted"> 使 用 !important 声明 </h2> 
CSS 代码 : 

h2( /* 确定 度 = 0,0,0,1 */ 


color:red !important; 
font-weight:bold; 

} 

#articleTitle{ /* 确定 度 = 0,1,0,0 */ 
color:green; 
background-color:silver; 

} 

.highlighted{ /* 确定 度 = 0,0,1,0 */ 
background-color: yellow !important; 


} 


如 图 6-8 所 示 为 以 上 代码 的 效果 。 尽 管 选择 符 h2 highlighted 的 确定 度 都 比 #articleTitle 
但 是 “!important” 声 明 使 得 元 素 内 部 的 文字 为 红色 、 背 景 为 黄色 。 


6-8 limportant 声明 的 属性 值 优先 级 最 高 
若 不 使 用 “!important” 进 行 声 明 ， 根 据 选择 符 的 确定 度 文字 应 为 绿色 ， 背 景 应 为 银灰 色 。 


© 注意 :一 些 Web 设计 者 认为 “limportant” 声明 破坏 了 CSS 选择 符 原 有 的 确定 度 规则 ， 
影响 了 CSS 的 结构 性 ， 因 此 不 推荐 在 设计 者 的 CSS 中 使 用 。 由 于 一 般 情况 下 ， 
设计 者 的 CSS 样式 要 比 用 户 的 优先 级 高 ， 所 以 “limportant” 声 明 经 常用 在 用 户 
的 样式 表 中 ， 用 来 覆盖 设计 者 的 某 些 样式 (有 关 设 计 者 和 用 户 的 样式 表 请 参考 下 
一 小 节 的 内 容 )。 


6.3.3 ” 层 倒 顺序 


前 文 提 到 ， 层 释 是 若干 规则 的 集合 ， 用 来 决定 元 素 该 如 何 应 用 样式 属性 。 它 规定 浏览 器 在 
CSS 规则 发 生 冲 突 时 该 如 何 处 理应 用 到 同一 元 素 上 的 多 个 样式 。CSS 规范 规定 了 层 县 顺序 。 

(1) 寻找 到 所 有 应 用 到 元 素 上 的 样式 声明 。 

(2) 通过 声明 的 重要 度 (也 称 权重 ， 看 声明 是 否 标 有 “!important”) 与 来 源 排 序 ， 按 照 有 限 
度 从 高 到 低 的 顺序 为 : 

e ”用 户 (User) 重 要 声明 

e ”设计 者 (Author) 重 要 声明 

e ”设计 者 一 般 声明 

e ”用 户 一 般 声明 

o 浏览 器 默认 声明 

G) 通过 选择 符 的 确定 度 给 重要 度 和 来 源 一 致 的 样式 规则 排序 : 确定 度 较 高 的 样式 规则 先 
于 确定 度 较 低 的 样式 规则 。 

(4) 最 后 ， 通 过 规则 先后 顺序 排序 : 如 果 两 条 规则 的 权重 、 来 源 和 确定 度 一 致 ， 后 声明 的 
样式 先 于 之 前 声明 的 样式 。 被 导入 进来 的 样式 规则 要 先 于 执行 导入 操作 的 样式 规则 。 

为 了 更 进一步 理解 以 上 规则 是 如 何 生效 的 ， 我 们 通过 具体 示例 来 解释 三 条 排序 规则 。 

1. 通过 声明 的 权重 和 来 源 排序 


第 2 条 层 肥 顺序 规则 规定 : 若 两 条 规则 应 用 到 同一 元 素 ， 标 有 !important 的 声明 优先 。 比 
如 下 面 两 条 规则 会 使 p 元 素 内 的 文字 为 银灰 色 而 不 是 红色 : 

p {color: silver !important;} 

p {color: red;} 

此 外 ， 该 层 登 顺序 规则 还 将 样式 表 的 来 源 考 虑 在 内 ， 请 看 如 下 规则 ; 

p (color: silver;) /* 来 自 设计 者 的 样式 */ 

p (color: red;] /* 来 自用 户 的 样式 */ 

两 条 样式 规则 分 别 来 自 设计 者 和 用 户 ， 这 时 来 自 设计 者 的 样式 优先 。 但 是 如 果 声 明 均 标 
有 !important 声明 ， 则 用 户 的 样式 优先 ， 比 如 : 

p (color: silver !important;}  /* 来 自 设计 者 的 样式 */ 

p (color: red 'important;] /* 来 自用 户 的 样式 */ 

这 也 说 明了 用 户 对 页 面 样式 的 确定 有 着 最 高 的 优先 权 。 假如 一 个 视力 有 障碍 的 人 感觉 某 些 
页 面 的 字体 偏 小 ， 则 可 以 在 用 户 样式 表 中 为 页 面 设置 一 个 较 大 的 字体 号 ， 并 添加 “!important” 
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eM 


— 
网 页 布局 开发 指南  , 


声明 。 这 样 所 有 页 面 都 会 按照 这 个 规则 进行 显示 。 
最 后 一 点 ， 不 管 是 设计 者 的 样式 还 是 用 户 的 样式 ， 它 们 都 优先 于 浏览 器 的 默认 样式 。 
È 提示 : 设计 者 样式 表 是 指 网 页 开发 人 员 编 写 的 样式 表 ， 它 和 页 面 文 件 一 起 放 在 Web 服 
务 器 上 。 用户 样式 表 则 由 访问 者 自己 编写 ， 存储 在 本 地 磁盘 上 ， 通 过 浏览 器 的 相 
关 设 置 可 以 将 样式 应 用 到 页 面 中 。 在 正 浏 览 器 中 , 你 可 以 通过 Internet 选项 里 的 
可 访问 性 按钮 选择 用 户 样式 表 文 件 . 在 Firefox "P, 可 以 向 userContent.css 文件 添 
加 自 定义 样式 。Opera 浏览 器 的 偏好 高 级 设 定 中 可 以 指定 用 户 样式 表 。 


2. 通过 选择 符 的 确定 度 排序 

我 们 已 经 在 6.3.1 小 节 介绍 过 确定 度 的 概念 以 及 计算 方法 。 第 3 条 层 且 顺序 规则 规定 ， 若 
两 条 规则 应 用 到 同一 元 素 且 它们 的 权重 和 来 源 一 致 ， 则 确定 度 较 高 的 样式 规则 先 于 确定 度 较 低 
的 样式 规则 。 请 看 如 下 示例 。 

CSS 代码 : 

hl.decorated( 

color:red; 
) 
hlf£newsTitle( 


color:blue; 
} 
hl{ 

color:black; 


} 

(X)HTML 代码 : 

<hl id-"newsTitle" class="decorated">W3C 推出 CSS 新 规范 </h1> 

这 三 条 样式 规则 的 确定 度 依次 为 0,0,1,1、0,1,0,1 和 0,0,0,1， 显 然 此 标题 文字 为 蓝 色 。 

3. 通过 规则 先后 顺序 排序 

最 后 一 条 规则 规定 :如 果 两 条 样式 规则 的 重要 度 、 来 源 和 确定 度 均一 致 ， 则 后 声明 的 规则 
要 优先 于 先 声明 的 规则 。 比 如 下 面 这 段 声 明 会 使 段落 文字 为 绿色 : 

p {color:red;} 

p {color:green;} 


64 小 结 


层 登 概念 是 CSS 的 关键 内 容 ， 层 登 顺 序 规定 了 浏览 器 该 如 何 处 理 存在 冲突 的 样式 声明 。 
其 中 还 涉及 到 继承 机 制 、 导 入 外 部 样式 表 、 选 择 符 的 确定 度 等 概念 。 

页 面 中 子 元 素 可 自动 继承 其 祖先 元 素 的 部 分 样式 属性 ， 并 采取 就 近 原则 。 对 于 那些 不 能 自 
动 继承 的 属性 可 使 用 inherit 进行 指定 继承 。 


(Qimport 规则 允许 开发 人 员 将 外 部 样式 表 导 入 到 当前 样式 表 文档 或 COHTML 文档 中 。 在 导 
入 到 样式 表 文 档 时 ，@import 规则 必须 写 在 所 有 其 他 CSS 规则 之 前 才能 生效 。 使 用 该 规则 开发 
人 员 还 可 以 根据 浏览 器 版 本 动态 调用 不 同 的 样式 表 文档 ， 从 而 达到 良好 的 兼容 性 。 

层 肥 顺序 首先 根据 声明 的 重要 度 和 来 源 排 序 ， 作 者 样式 表 优 于 用 户 样式 表 ， 用 户 重要 样式 
优 于 作者 重要 样式 ， 不 论 怎样 它们 都 优 于 浏览 器 默认 的 样式 。 标 有 !important 的 样式 声明 视 为 
重要 声明 。 其 次 ,， 层 县 顺序 根据 选择 符 的 确定 度 来 排序 ， 确 定 度 较 高 的 样式 规则 优 于 确定 度 较 
低 的 样式 规则 。 最 后 ， 根 据 样式 出 现 的 次 序 来 排序 ， 后 定义 的 样式 优 于 先 定义 的 样式 。 

下 一 章 将 介绍 有 关 CSS GEO POTE. 


第 7 章 £o 模 型 


盒 模型 是 CSS 中 较为 重要 的 核心 概念 之 一 , 它 是 使 用 CSS 控制 页 面 元 素 外 观 样式 的 基础 。 
只 有 充分 理解 盒 模型 概念 才能 进一步 掌握 CSS 的 正确 使 用 方法 。 本 章 从 介绍 盒 模型 概念 开始 ， 
依次 介绍 其 所 涉及 的 边 距 、 边 框 和 填充 等 概念 ， 接 着 会 介绍 如 何 控制 元 素 的 宽度 和 高 度 ， 最 后 
介绍 overflow 属性 与 display 属性 的 含义 和 作用 。 

本 章 主要 内 容 
CSS 盒 模型 的 概念 
什么 是 边 距 、 边 框 和 填充 
宽度 和 高 度 
overflow 属性 
display 属性 


COHTML 提供 了 各 种 各 样 的 元 素 , 用 来 表示 不 同 的 内 容 , 例如 p 元 素 表示 段落 , h 元 素 表 
示 标 题 ，img 元 素 表示 一 幅 图 像 ，…… 。 当 浏览 器 显示 这 些 元 素 的 时 候 ， 把 每 一 个 元 素 都 视 为 
-个 方形 的 盒子 (Box)。CSS 盒 模型 (Box ModeD 描 述 了 根据 文档 树 生成 的 一 系列 矩形 区 域 。 浏 
览 器 会 分 析 下 载 的 网 页 ， 并 根据 其 中 的 内 容 在 内 存 中 构造 一 颗 文 档 树 ， 然 后 将 文档 树 中 可 视 的 
内 容 绘 制 在 浏览 器 中 ， 形 成 我 们 看 到 的 网 页 。 
盒 模型 涉及 内 容 (Contenb)、 边 距 (Margin)、 填 充 (Padding) 和 边框 (BordeD 四 个 概念 ,如 图 7-1 
所 示 为 盒 模型 的 示意 图 。 


上 边 距 
上 边框 
上 填充 


内 容 
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下 填充 
下 边框 
下 边 距 
7-1 会 模型 示意 图 


[À 提示 :， 有些 书 中 也 称 边 距 为 外 边 距 ， 称 填充 为 内 边 距 。 


图 7-1 绘制 了 盒 模型 的 各 个 部 分 及 相互 之 间 的 位 置 关 系 。 位 于 盒 模型 中 心 位 置 的 是 元 素 内 
容 ， 比 如 p 元 素 中 的 文字 , img 元 素 中 的 图 像 ， 该 区 域 的 大 小 正好 可 以 包含 元 素 中 所 有 的 内 容 。 
与 内 容 紧 挨 着 的 是 填充 区 域 ,填充 可 使 内 容 和 边框 之 间 产 生 一 定 的 空间 ,填充 外 侧 是 元 素 的 边 
框 ， 边 框 之 外 是 边 距 区 域 ， 边 距 使 得 本 元 素 与 周围 元 素 之 间 产 生 一 定 的 空间 。 

默认 状态 下 ， 不 同 的 (X)HTML 元 素 会 包含 不 同 的 盒 模型 属性 ， 比 如 p 元 素 默认 情况 下 就 
会 有 上 下 边 距 的 存在 。 图 7-2 展示 了 一 个 实际 的 例子 。 


F untitled Document - Microsoft Internet Explorer. 


盒 模型 中 的 内 容 部 分 放置 元 素 本 身 的 内 容 。 的 
就 是 图 像 。 每 个 盒子 四 周 还 可 以 选择 性 地 设置 填充 、 


盒 模型 中 的 内 容 部 分 放置 元 素 本 身 的 内 容 。 比 如 
img 元 素 中 放置 的 就 是 图 像 。 NE 
以 选择 性 地 设置 填充 、 边 框 和 


盒 模型 中 的 内 容 部 分 放置 元 素 本 身 的 内 容 。 比 如 ime 元 素 中 放置 的 
就 是 图 像 。 每 个 盒子 四 周 还 可 以 选择 性 地 设置 填充 、 边 框 和 边 距 。 


7-2 浏览 器 中 盒 模型 的 各 个 部 分 


7.2 ù 4E 


使 用 边框 可 以 给 元 素 四 周 添加 一 个 矩形 的 线 框 ， 由 图 7-1 的 盒 模型 示意 图 可 知 ， 边 框 位 于 
填充 和 边 距 之 间 。CSS 针对 边框 提供 了 三 类 样式 属性 ， 分 别 控制 边框 样式 风格 、 边 框 颜色 和 边 
框 的 粗细 程度 。 另 外 ， 四 个 方向 的 边框 样式 是 独立 的 ， 可 以 分 别 进行 设置 。 


7.2.1 边框 样式 风格 


CSS 为 设计 者 提供 了 相当 丰富 的 边框 样式 ， 使 用 如 下 属性 就 可 以 分 别 对 上 、 右 、 下 、 左 四 
个 方向 的 边框 设置 不 同 的 样式 : 

@  border-top-style 

@  border-right-style 

©  border-bottom-style 

©  border-left-style 

边框 风格 属性 可 使 用 的 属性 值 及 其 产生 的 效果 如 表 7-1 所 示 。 


eg 


c 
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表 7-1 边框 风格 属性 及 其 效果 


边框 风格 属性 值 产生 的 效果 

dashed 虚线 边框 
dotted 点 状 边框 
double 双 层 边框 

roove MANR, 5 ridge 效果 相反 
hidden 隐藏 边框 
inset TUER, 5s EARRA 
none 不 设置 边框 
outset 上 凸 效果 ， 与 下 止 效果 相反 
Tidge 边框 中 心 隆起 ， 与 groove 效果 相反 
solid 实心 边框 


7-3 各 种 边框 风格 在 IE 中 的 显示 效果 
不 同 的 浏览 器 对 于 边框 风格 的 显示 效果 存在 细微 的 差异 ， 比 如 Firefox 中 的 双 层 边框 ， 它 
的 两 层 边框 粗细 程度 一 致 ， 而 TE 则 有 差别 。 如 图 7-4 所 示 为 各 种 风格 的 边框 在 Firefox 浏览 器 
中 的 显示 效果 ， 读 者 可 以 仔细 比较 它们 之 间 的 不 同 。 


1 dashed 1 dotted p double groove hidden 


7-4 各 种 边框 风格 在 Firefox 中 的 显示 效果 


7.2.2 ”边框 颜色 和 粗细 程度 


除了 边框 的 风格 样式 外 ， 边 框 的 颜色 和 粗细 程度 也 可 由 CSS 进行 控制 。 下 面 4 个 属性 分 
别 控制 上 、 右 、 下 、 左 4 个 边框 的 颜色 : border-top-color. border-right-color. border-bottom-color 
和 border-left-color。 属性 值 为 CSS 中 合法 颜色 值 以 及 表示 颜色 的 关键 字 。 假如 没有 给 边框 指定 


颜色 ， 其 颜色 依 color 属性 而 定 。 

与 颜色 类 似 ， 控 制 边 框 粗细 程度 的 4 个 属性 为 : border-top-width、border-right-width、 
border-bottom-width 和 border-left-width。 这 些 属性 除了 可 以 使 用 CSS 的 长 度 值 和 百分数 外 , 还 
能 使 用 如 下 3 个 关键 字 : thin, medium 和 thick. 

例如 ， 以 下 样式 代码 会 产生 如 图 7-5 所 示 效果 : 

p#pl{ 

text-align:center; 
border-top-style:dashed; 
border-right-style:dotted; 
border-bottom-style:double; 
border-left-style:dotted; 
border-top-color:red; 
border-right-color:#4DE354; 
border-bottom-color:rgb(100, 200, 50); 
border-left-color:blue; 
border-top-width:medium; 
border-right-width: 1px; 
border-bottom-width:0.6em; 
border-left-width:thick; 

) 


«p id="pl"> 边 框 属性 示例 </p> 
* CURE 
L————S 


7-5 边框 属性 示例 


© 注意 :在 图 7.5 中 ，p 元素 左右 边框 样式 都 是 dotted， 但 是 在 正 浏览 器 中 ， 当 边框 宽度 
设 成 1px 后 ， 其 样式 转变 为 dashed T. 


7.2.3 边框 样式 缩写 形式 


从 7.2.2 小 节 的 示例 中 可 以 看 到 ， 每 个 边框 都 要 用 独立 的 CSS 属性 进行 设 定 ， 要 想 控制 一 
个 元 素 所 有 边框 的 所 有 样式 ， 就 需要 编写 大 量 的 代码 ， 好 在 CSS 给 我 们 提供 了 相关 样式 的 缩 
写 形式 。 

border-style 属性 可 同时 指定 4 个 边框 的 样式 , 该 属性 后 面 可 以 跟随 1 至 4 个 边框 样式 属性 
值 。 含义 如 下 : 

border-style: 四 个 边框 的 风格 ; 

border-style: 上 下 边框 的 风格 左右 边框 的 风格 ; 


border-style: 上 边框 的 风格 右 左边 框 的 风格 下 边框 的 风格 ; 
border-style: 上 边框 的 风格 右边 框 的 风格 下 边框 的 风格 左边 框 的 风格 ; 


图 7-6 展示 了 以 下 4 条 CSS 声明 所 产生 的 样式 效果 : 


cM 
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border-style:solid; 

border-style:solid dotted; 
border-style:solid double ridge; 
border-style:dashed solid dotted double; 


四 个 边框 的 风格 均 为 solid 


border-style:solid dotted; 


:上 下 边框 风格 为 solid; 左右 边框 风格 为 dotted 


de en AAA 


上 上 边框 风格 ，dotted; 右 左边 框 风 ouble; 下 边框 风格 ，ridge; 


order-style:dashed solid dotted double, 
边框 ，dashed; 右边 框 ，solid; 下 边框 ，dotted; 左边 框 ，double 


图 7-6 border-style 属性 的 用 法 


[È HER: border-style 届 性 后 面 跟 随 4 个 属性 值 时 ， 其 影响 边框 的 顺序 可 记 为 英文 单词: 
TRouBLe( 麻 烦 ， 问 题 )， 其 中 的 大 写字 母 正好 是 top、right、bottom 和 left 的 首 字 
母 。 也 可 记 为 从 top 开始 的 顺 时 针 方向 。 


类 似 地 ， 颜 色 和 宽度 都 有 缩写 形式 : border-color 和 border-width。 属 性 值 的 个 数 和 含义 同 
border-style 属性 。 这 样 ，7.2.2 小 节 中 的 示例 代码 就 可 重 写 为 如 下 形式 : 
p#pl{ 
text-align:center; 
border-style:dashed dotted double; 
border-color:red #4DE354 rgb(100, 200, 50) blue; 
border-width:medium lpx 0.6em thick; 


) 


边框 样式 属性 的 缩写 形式 除了 可 以 按 类 别 划分 外 还 可 以 按照 方向 划分 ， 你 可 以 分 别 控制 
上 、 右 、 下 、 左 四 个 方向 的 边框 的 所 有 样式 ， 它 们 对 应 的 属性 分 别 为 : border-top border-right, 
border-bottom 和 border-left。 该 属性 后 面 跟随 宽度 值 、 边 框 风 格 和 颜色 ， 三 个 属性 值 的 顺序 是 
任意 的 。 另 外 ， 如 果 元 素 的 四 个 边框 样式 一 致 ， 还 可 以 使 用 更 简便 的 border 属性 。 
以 下 代码 将 产生 如 图 7-7 所 示 的 效果 : 
p#pl{ 
border-top:dotted 4px red; 
border-right:solid 2px yellow; 
border-bottom:dotted 4px red; 
border-left:solid 2px yellow; 


} 
p#p2{ 

border:lem solid #EDDE34; 
} 


ptp3t 
border:2px dashed #777; 
border-left:6px solid #79E283; 
) 


你 可 以 使 用 如 下 四 个 属性 同时 给 每 个 边框 添加 属性 : 

<p id-"pl"»border-top border-right border-bottom border-left«/p» 

你 还 可 以 使 用 如 下 属性 同时 给 所 有 边框 添加 属性 : 

<p id="p2">border</p> 

使 用 了 border 属性 后 ， 还 可 以 给 某 个 或 某 几 个 边框 添加 属性 ， 比 如 

<p id="p3">border: dashed #777 2px;«br /»border-left:solid #79E283 6px;«/p» 


你 可 以 使 用 如 下 四 个 属性 同时 给 每 个 边框 添加 属性 ， 


你 还 可 以 使 用 如 下 属性 同时 给 所 有 边框 添加 属性 ， 


使 用 了 border 属 性 后 ， 还 可 以 给 某 个 或 某 几 个 边框 添加 属性 ， 比 如 


E 


7-7 border 属性 示例 


7.3 填充 和 边 距 


盒 模型 中 的 填充 和 边 距 都 可 以 用 来 给 元 素 内 容 周围 增加 空间 。 但 是 填充 和 边 距 位 于 盒 模型 
中 的 不 同 部 分 ， 因 此 它们 的 用 法 和 作用 也 不 相同 。 


7.3.1 填充 


填充 是 指 元 素 中 内 容 与 边框 之 间 的 区 域 .CSS 提供 了 如 下 4 个 属性 分 别 控制 元 素 的 上 、 右 、 
下 、 左 四 个 方向 的 填充 : padding-top, padding-right, padding-bottom 和 padding-left。 属 性 值 类 
型 为 长 度 值 和 百分数 。padding 为 填充 的 缩写 属性 ， 其 属性 值 的 个 数 和 每 个 属性 值 所 代表 的 方 
向 与 border-style 属性 是 一 致 的 。 

请 看 如 下 示例 : 

pt 


border:lpx solid gray; 
padding:l0px 30px; 


eM 
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img{ 
border:lpx dashed black; 


padding:16px; 


<p> 填 充 是 元 素 内 容 与 边 距 之 间 的 空白 区 域 ，CSs 提供 了 padding-top, padding-right, 
padding-bottom fl padding-left 属性 分 别 控制 上 、 右 、 下 、 左 四 个 方向 的 填充 。padding 属性 
为 缩写 形式 ， 后 可 跟 1 至 4 个 属性 值 。</p> 


«img src-"images/flower.jpg" /> 


效果 如 图 7-8 Bros 


填充 是 元 素 内 容 与 边 距 之 间 的 空白 区 域 ，CSS 提 供 了 padding-top、 
padding-right、padding-bottom 和 padding-left 属 性 分 别 控制 上 、 
Tii 左 四 个 方向 的 填充 。padding 属 性 为 缩写 形式 ， 后 可 跟 1 至 4 


7-8 padding 属性 的 使 用 
padding 属性 使 用 百分数 时 ， 浏 览 器 会 根据 包含 该 元 素 的 元 素 的 宽度 来 确定 填充 的 大 小 。 
例如 : 


pt 

padding:105; 

border:lpx solid black; 
} 
<p>padding 属性 使 用 百分数 时 ， 浏 览 器 会 根据 包含 该 元 素 的 元 素 的 宽度 来 确定 填充 的 大 小 。 比 如 ， 这 
个 GRE body 元 素 包含 ， 因 此 填充 的 大 小 将 使 用 body 元 素 的 宽度 进行 计算 。 假 如 body 元 素 宽度 
为 800px， p 的 padding 属性 设 为 5%8， 则 实际 填充 大 小 为 40px。 调 整 浏览 器 窗口 会 发 现 填充 的 大 小 


是 变化 的 。</p> 
如 图 7-9 所 示 为 以 上 代码 在 不 同 大 小 的 浏览 器 窗口 中 的 效果 ， 可 以 看 到 它们 的 填充 是 不 
相同 的 。 
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Padding 属 性 使 用 百分数 时 ， 浏 览 器 会 根据 
包含 该 a 有 
^N. 比如 ， 元 素 被 body; 


人 
假如 body 元 素 席 度 为 : pfi 

ee E NIENTE 

Sitio 调整 浏览 器 窗口 会 发 现 填充 的 大 小 是 
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padding 属 性 使 用 百分数 时 ， 浏 览 器 会 根据 包含 该 元 素 的 元 素 的 宽度 来 确定 填充 的 大 小 。 比 
m 这 个 p 元 素 被 body 元 素 包 含 ， 因 此 填充 的 大 小 将 使 用 body 元 素 的 宽度 进行 计算 。 假 如 

ody 元 素 宽度 为 800px， Depot sets, 则 实际 填充 大 小 为 90px。 调 整 浏览 器 窗口 
SAGA ERI 


7-9 使 用 百分数 作为 padding 属性 值 


7.3.2 边 距 


边 距 位 于 盒 模型 的 最 外 侧 ， 使 用 边 距 可 以 在 相 邻 的 多 个 元 素 之 间 产 生 空白 区 域 。 和 填充 一 
FE, CSS 为 每 个 方向 的 边 距 都 提供 了 独立 的 属性 ,它们 是 margin-top .margin-right\margin-bottom 
和 margin-left， 以 及 边 距 属性 的 缩写 属性 margin， 该 属性 所 跟 属 性 值 的 个 数 及 其 所 代表 的 方向 
与 padding 属性 相同 。 

用 来 表示 段落 的 p 元 素 在 默认 情况 下 就 含有 一 定 的 边 距 , 使 得 段落 与 其 他 元 素 之 间 产 生 一 
定 的 空间 。 请 看 下 面 的 示例 : 

«p id="p1"> 边 距 区 域 位 于 边框 的 外 侧 ， 通 常用 来 在 多 个 相 邻 的 元 素 之 间 添加 空白 区 域 。</p> 

«p id="p2"> 默 认 情况 下 ， 许 多 (X)HTML 元 素 都 包含 一 定 的 边 距 ， 比 如 p 元 素 、body 元 素 。</p> 


以 上 代码 会 产生 如 图 7-10 所 示 的 效果 。 


ET [3 
O=- 0- Aam e| ” 
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7-10 p 元 素 和 body 元 素 默认 情况 下 存在 边 距 


eH 


cM 


5) 
网 页 布局 开发 指南  , 


如 果 添加 以 下 的 样式 ， 将 p 元 素 的 margin 属性 设 为 0， 则 会 产生 如 图 7-11 所 示 的 效果 : 
n 


margin:0; 


H 


ZR IUE - Hicrosoft Internet Explorer 


HTIL 元 素 都 包含 一 定 的 边 距 ， 比 如 p 元 


[ECCL Seem 
图 7-11 取消 边 距 后 的 效果 
对 比 图 7-10 和 图 7-11 可 以 发 现 ， 文 字 会 紧 贴 着 浏览 器 窗口 的 边框 ， 两 个 段落 之 间 的 距离 
也 没有 了 ， 这 都 是 margin 属性 的 作用 。 


[ 提示 :， 边框 、 边 距 和 填充 亦 可 用 在 内 联 元 素 上 ， 但 是 它们 只 在 水 平方 向 上 产生 正常 的 效 
果 ， 而 竖 直 方向 上 的 效果 与 块 级 元 素 不 同 。 


前 面 说 过 ， 盒 模型 中 内 容 区 域 的 大 小 完全 是 由 元 素 中 内 容 多 少 决定 的 ， 比 如 ? 元 素 的 内 容 
区 域 会 根据 其 文字 的 大 小 和 多 少 等 因素 而 定 ,而 img 元 素 的 内 容 区 域 与 其 图 像 的 大 小 一 致 .CSS 
提供 了 两 个 属性 可 以 改变 盒 模型 中 内 容 默 认 的 大 小 : 宽度 属性 width 和 高 度 属性 height. 


7.4.1 width #0 height 


1. width 属性 


width 属性 用 来 设置 元 素 内 容 的 宽度 ， 属 性 值 可 以 是 长 度 值 或 百分数 ， 它 的 默认 值 为 auto。 
请 看 下 面 的 示例 : 


p#pl{ 
width:230px; 
$ 
p#p2{ 
width:70%; 


Xp id="p1"> 盒 模型 中 的 内 容 区 域 为 (X) HTML 元 素 中 内 容 部 分 所 占 ， 默 认 情况 下 ， 该 区 域 的 大 小 完全 
由 元 素 内 容 而 定 。 使 用 css 提供 的 width 属性 可 以 改变 默认 的 宽度 值 。 宽 度 值 可 以 是 长 度 值 或 者 百 分 
数 。</p> 
«p id="p2"> 盒 模型 中 的 内 容 区 域 为 (X) HTML 元 素 中 内 容 部 分 所 占 ， 默 认 情况 下 ， 该 区 域 的 大 小 完全 
由 元 素 内 容 而 定 。 使 用 css 提供 的 width 属性 可 以 改变 默认 的 宽度 值 。 宽 度 值 可 以 是 长 度 值 或 者 百 分 
数 。</p> 


以 上 代码 设 定 第 一 个 段落 宽度 为 230px， 第 二 个 段落 宽度 为 70%， 这 个 值 是 以 该 元 素 的 父 
元 素 宽 度 为 基础 计算 的 ， 在 这 里 是 body 元 素 。 效 果 如 图 7-12 所 示 。 
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Eie ti itdge d (COHTIL 元 素 中 内 容 部 分 所 占 ， 默 认 情况 
该 区 域 的 大 小 完全 由 元 素 内 容 而 定 。 使 用 CSS 提 供 的 width 属 

ACER QI ERI. 宽度 值 可 以 是 长 度 值 或 者 百分数 。 
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图 7-12 width 属性 
2. height 属性 
和 width 属性 类 似 ，height 属性 用 来 控制 盒 模型 中 内 容 区 域 的 高 度 。 属 性 值 为 长 度 值 或 百 
分 数 ， 默 认 值 为 auto。 
但 是 和 width 属性 不 同 的 是 ， 当 height 值 小 于 内 容 区 域 默 认 高 度 值 时 ， 元 素 内容 仍 旧 按照 
原来 的 大 小 显示 ， 也 就 是 说 元 素 内 容 不 会 被 “截断 ”。 请 看 如 下 示例 : 
<style type="text/css"> 
p#pl{ 
width:400px; 
height:150px; 
background-color: #EEE; 
H 
p#p2{ 
width:40%; 
height:40px; 
background-color: #EEE; 
ii 


«p id="p1 "> MRA PHARRR HTML 元 素 中 内 容 部 分 所 占 ， 默 认 情 况 下 ， 该 区 域 的 大 小 完全 由 元 
素 内 容 而 定 。 使 用 css 提供 的 height 属性 可 以 改变 默认 的 宽度 值 。 高 度 值 可 以 是 长 度 值 或 者 百分数 。 
</p> 
«p id="p2"> 僵 模型 中 的 内 容 区 域 为 HTML 元 素 中 内 容 部 分 所 占 ， 默 认 情况 下 ， 该 区 域 的 大 小 完全 由 元 
素 内 容 而 定 。 使 用 css 提供 的 height 属性 可 以 改变 默认 的 宽度 值 。 高 度 值 可 以 是 长 度 值 或 者 百分数 。 
</p> 
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这 里 ， Ens 我 们 还 用 了 一 个 background-color 属性 为 
元 素 添 加 背景 颜色 ， 后面 还 会 讲 到 这 个 属性 ， 这 里 使 用 为 的 是 更 清楚 地 分 辨 出 元 素 的 大 小 。 图 
7-13 展示 了 IE6( 左 ) 和 erie 


e oE Ea a r A R SUR 。 使 模型 中 的 内 容 区 域 为 HmL 元 素 中 内 容 部 分 所 占 ， 默 认 情 


该 区 域 的 大 小 完全 ! 内 容 而 定 。 使 用 Css 提 供 况 下， 该 区 域 的 大 小 完全 由 元 素 内 容 而 定 。 使 用 Css 提 供 
的 height 属 性 可 以 改变 默认 的 亮度 值 。 高 度 值 可 以 是 长 度 。 的 height 属 性 可 以 改变 默认 的 宽度 值 。 高 度 值 可 以 是 长 度 
值 或 者 百分数 。 值 或 者 百分数 
盒 模型 中 的 内 容 区 域 为 HTIL 元 素 中 内 容 使 模 型 中 的 内 容 区 域 为 HTIL 元 素 中 内 容 
部 分 所 点， 默认 情况 下 ， 该 区 域 的 大 小 部 分 所 占 ， 葡 认 情况 下 ， 该 区 域 的 大 小 
完全 由 元 素 内 容 而 定 。 使 用 CSS 提 供 的 完全 由 元 素 内 容 而 定 。 使 用 CSS 提 供 的 _ 
height 属 性 可 以 改变 默认 的 宽广 值 。 高 height 属 性 可 以 改变 默认 的 宽度 值 。 高 
度 值 可 以 是 长 度 值 或 者 百分数 。 度 值 可 以 是 长 度 值 或 者 百分数 。 


图 7-13 IE6( 左 ) 显 示 效 果 错 误 ，IE7( 右 ) 的 显示 效果 正确 


在 正 6 中 ， 盒 模型 的 内 容 区 域 和 元 素 内 容 区 域 一致 ， 并 没有 严格 按照 height 的 属性 值 确 定 
高 度 ， 而 正 7 则 修正 了 这 个 错误 (注意 背景 色 履 盖 的 区 域 表示 盒 模型 的 内 容 区 域 )。Firefox 和 
Opera 浏览 器 的 显示 是 正确 的 。 

当 height 属性 值 为 百分数 时 ， 该 元 素 的 高 度 由 其 父 元 素 高 度 和 该 百分比 相 乘 而 得 ， 前 提 是 
父 元 素 的 高 度 不 能 是 auto， 否 则 该 父 元 素 内 所 有 后 代 元 素 的 height 属性 值 都 将 为 auto。 请 看 下 
面 的 示例 : 

div#wrapper{ 

width:100px; 
height:100px; 
background:gold; 

} 

div#inner{ 

width:50%; 
height:50%; 
background:gray; 

} 


<div id="wrapper"><div id="inner"></div></div> 


效果 如 图 7-14 所 示 。 
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7-4 ”使 用 长 度 值 的 height 属性 


cM 


但 如 果 将 #wrapper 的 height 属性 改 为 70%， 则 会 产生 如 图 7-15 所 示 效 果 。 


i untitled Document - Microsoft Internet Explorer 
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图 7-15 使 用 百分数 的 height 属性 


图 7-15 与 我 们 设想 的 有 些 差 异 ，#wrapper 的 高 度 并 不 是 浏览 器 窗口 高 度 的 70%， 里 面 的 
div 元 素 也 不 是 目前 父 元 素 高 度 的 50%。 原 因 在 于 ，#wrapper 的 父 元 素 为 body， 而 body 的 高 
度 属性 默认 为 auto， 其 高 度 根据 它 所 含 内 容 多 少 而 定 ， 并 不 是 浏览 器 窗口 的 高 度 。 
如 果 给 body 添加 一 个 确定 的 高 度 值 ， 则 会 产生 如 图 7-16 所 示 效 果 : 
body{ 

margin:0; 

height:400px; 


I [T [T [gsm 


BHi7-16 父 元 素 高 度 确定 后 ， 后 代 元 素 高 度 的 百分数 才 会 起 作用 


从 图 7-16 可 以 看 出 ，#wrapper 的 高 度 是 body 元 素 高 度 的 70%， 即 280px， 前 提 是 给 body 
元 素 设 定 了 确定 的 height 属性 ， 而 不 是 默认 的 auto。 


© 注意 : 如 果 将 上 例 body 元 素 的 高 度 设 为 百分数 ， 则 只 有 在 IE6 中 ，div 元 素 的 高 度 会 按 
照 百分数 进行 计算 。 读 者 可 以 亲自 试 一 试 。 


[109] 
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前 面 说 过 ， 任 何 元 素 的 width 和 height 属性 的 默认 值 均 为 anto， 这 时 ， 元 素 宽度 和 高 度 的 
变化 与 元 素 本 身 的 类 型 有 关 。 比 如 p 元 素 水 平方 向 会 占 满 整 个 空间 ， 而 竖 直 方向 则 依据 其 所 包 
含 内 容 的 多 少 而 定 ， 就 是 块 级 元 素 的 显示 特征 ， 和 了 元 素 相同 的 还 有 div、h1~h6 元 素 等 。 

在 下 面 的 代码 中 ， 我 们 给 hl 和 p 元 素 指定 了 不 同 的 背景 色 ， 以 便 能 看 出 它们 所 占据 空间 
的 大 小 : 

hlí( 

background-color:red; 
} 
pt 


background-color: yellow; 
} 


«hl»auto 值 的 含义 </h1> 


<p> 当 块 级 元 素 的 宽度 和 高 度 为 auto 时 , 宽度 会 占 满 整 个 水 平方 向 上 的 空间 , 而 高 度 会 根据 其 所 包含 内 
容 的 多 少 而 定 。</p> 


效果 如 图 7-17 所 示 。 


FJ autolfi& X - Microsoft Internet Explorer. 


XPO MO FEV KRW IAV WE) 
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对 于 显示 图 像 的 img WK, auto 值 意味 着 图 像 按 照 其 原本 的 尺寸 进行 显示 ， 而 对 于 table 
元 素 ， 它 的 宽度 和 高 度 都 根据 其 所 包含 的 内 容 多 少 而 变化 。 


7.4.0 最 大 值 和 最 小 值 


有 时 候 ， 我 们 需要 某 些 元 素 在 一 定 范围 内 随 着 父 元 素 的 大 小 变化 ， 当 超出 这 个 范围 时 采用 
固定 大 小 。CSS 提供 的 min-width、max-width、min-height 和 max-height 就 可 以 完成 这 个 功能 。 
比如 页 面 中 有 个 p 元 素 ， 设 计 者 希望 该 元 素 宽度 能 随 着 浏览 器 宽度 的 变化 而 定 ， 以 适应 不 同 的 
分 辩 率 , 假如 某 用 户 的 显示 器 分 辨 率 为 1600x1200, 那么 浏览 器 最 大 化 时 的 宽度 将 接近 1600px， 
这 时 我 们 不 希望 p 元 素 宽度 被 拉 伸 至 浏览 器 窗口 的 宽度 ， 而 是 要 求 固定 在 某 个 确定 值 。 这 时 就 
可 以 使 用 CSS 提供 的 这 些 属 性 来 实现 这 个 功能 。 


c 


1. min-width 和 max-width 


min-width 和 max-width 属性 分 别 设 定 元 素 的 最 小 宽度 值 和 最 大 宽度 值 ， 在 下 面 的 示例 中 ， 
p 元 素 被 设 定 了 最 小 和 最 大 宽度 : 


pt 
min-width:300px; 
max-width:600px; 
background-color:yellow; 


) 


<p>CSS 提供 的 min-width 和 max-width 属性 可 设 定 元 素 宽度 的 最 小 值 和 最 大 值 。 在 此 范围 内 , 元素 
的 宽度 会 跟随 父 元 素 变化 ， 若 超出 这 个 范围 ， 元 素 宽度 将 保持 不 变 。</p> 


请 看 图 7-18 所 示 的 效果 。 


Untitled Document - Windows Teese [=] ES Untitled Document - Windows Internet Explorer. jl 


7-18 min-width 和 max-width 属性 的 使 用 (IE7) 


从 图 7-18 可 以 看 出 ， 当 浏览 器 窗口 宽度 过 小 时 ，p 元 素 的 宽度 保持 在 min-width 属性 设 定 
的 300px， 当 浏览 器 窗口 宽度 过 大 时 ，p 元 素 的 宽度 为 max-width 设 定 的 600px， 在 此 范围 内 了 
元 素 宽度 则 会 跟随 浏览 器 窗口 宽度 的 变化 而 变化 。 

2. min-height 和 max-height 

min-height 和 max-height 属性 分 别 设 定 元 素 的 最 小 高 度 值 和 最 大 高 度 值 ， 它 们 通常 用 于 那 
些 高 度 动态 变化 的 元 素 ， 比 如 p 元 素 的 高 度 会 根据 其 中 文字 的 多 少 动态 变化 。 假 如 我 们 又 不 希 
望 该 元 素 的 高 度 变 得 过 小 或 者 过 大 , 这 时 就 可 以 使 用 min-height 和 max-height 给 元 素 限 定 其 最 
小 和 最 大 的 高 度 值 。 


EE 
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请 看 如 下 示例 : 


Pi 
width:350px; 
background-color: yellow; 
min-height:60px; 
max-height:100px; 

) 


«p»CSS 提供 的 min-height fll max-height 属性 可 分 别 设 定 元 素 的 最 小 高 度 值 和 最 大 高 度 值 。</p> 
<p>Css 提供 的 min-height l max-height 属性 可 分 别 设 定 元 素 的 最 小 高 度 值 和 最 大 高 度 值 ， 它 们 

通常 用 于 那些 高 度 动态 变化 的 元 素 ， 比 如 p 元 素 的 高 度 会 根据 其 中 文字 的 多 少 动态 变化 。 假 如 我 们 又 不 
希望 该 元 素 的 高 度 变 得 过 小 或 者 过 大 ， 这 时 就 可 以 使 用 min-height 和 max-height 给 元 素 限 定 其 最 


小 和 最 大 的 高 度 值 。</p> 
效果 如 图 7-19 所 示 。 


和 最 大 的 高 度 值 。 


7-19 min-height 和 max-height 属性 的 使 用 (IE7) 
(B) 注意 : 本 节 介绍 的 width 和 height 属性 只 适用 于 p. div 一 类 的 块 级 元 素 ， 对 于 span. a 
这 样 的 内 联 元 素 则 不 起 作用 。 有 关 块 级 元 素 和 内 联 元 素 的 知识 请 参考 本 书 的 第 一 
篇 另外， 本章 7.7 节 将 介绍 与 元 素 类 型 相关 的 display 属性 ， 读 者 可 了 解 更 多 元 


素 类 型 的 知识 。 
宽度 和 高 度 的 最 大 值 和 最 小 值 在 IE6 
表达 式 来 解决 。 


7.5.1 盒 模型 的 维度 


可 知 ， 元 素 内 容 区 域外 侧 还 包含 填充 、 边 框 和 边 距 


中 不 起 作用 ， 针 对 这 一 问题 可 以 使 用 CSS 


75 盒 模型 相关 内 容 及 高 级 主题 


元 素 的 width 属性 和 height 属性 所 设 定 的 是 元 素 内 容 区 域 的 宽度 和 高 度 ， 由 盒 模型 示意 图 


区 域 ， 当 元 素 显 示 在 页 面 中 时 ， 它 的 总 体 宽 


度 和 高 度 将 由 如 下 公式 计算 ( 盒 模型 维度 示意 图 如 图 7-20 所 示 ): 


A 


e ”元 素 的 宽度 = 内 容 宽度 + 左右 填充 宽度 + 左右 边框 宽度 + 左右 边 距 宽度 
e 元 素 的 高 度 = 内 容 高 度 + 上 下 填充 高 度 + 上 下 边框 高 度 + 上 下 边 距 高 度 


width 属性 设 定 的 宽度 
元 素 整体 宽度 


7-20 盒 模型 维度 示意 图 


7.552 盒 模 型 与 背景 


CSS 的 background 属性 可 用 来 设 定 元 素 背 景 , 为 其 添加 颜色 或 背景 图 像 。 背景 属性 会 影响 
盒 模型 中 的 内 容 和 填充 两 部 分 区 域 ， 而 边框 背景 是 由 边框 样式 本 身 提供 的 ， 边 距 区 域 的 背景 则 
总 是 透明 的 。 有 关 background 属性 的 详细 内 容 我 们 会 在 第 11 章 进 行 介绍 。 
请 看 如 下 示例 : 
body{ 
margin:0; 
background-color:silver; 
) 
div( 
height:50px; 
width:50px; 
margin:20px; 
padding:10px; 
border:l10px solid black; 
background-color: yellow; 


) 


«div»«/div» 

上 述 样式 将 body 元 素 边 距 设 为 0， 并 设 定 背 景色 为 银灰 色 。div 元 素 内 容 的 高 度 和 宽度 为 
50px， 边 距 为 20px， 填 充 为 10px 再 加 上 10px 的 黑色 实 线 边框 。 从 图 7-21 TUAH, div 边 距 
部 分 透 出 了 body 元 素 的 银灰 色 背 景 ， 边 框 部 分 为 黑色 ， 边 框 里 面 的 填充 和 内 容 部 分 的 背景 色 
均 为 黄色 。 
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图 7-21 盒 模型 与 背景 


Q) E: 当 元 素 边框 风格 为 dotted 或 dashed 时 ， 边 杠 中 的 空 阶 部 分 会 显露 出 背景 颜色 或 
图 像 。 也 就 是 说 ， 背 景 实 际 上 画 到 了 边框 的 位 置 ， 只 不 过 位 于 边框 的 下 面 。 以 下 
这 个 链接 展示 了 三 维 形式 的 CSS 盒 模型 各 个 区 域 之 间 的 关系 : 
http://www.hicksdesign.co.uk/journal/3d-css-box-model 


7.5.3” 边 距 重 又 问题 


JAE E Æ (Margin Collapsing) 的 意思 就 是 当 上 下 两 个 元 素 相 邻 时 , 二 者 之 间 的 边 距 由 它们 的 
最 大 值 而 定 ， 并 不 是 二 者 边 距 之 和 。 请 看 下 面 的 示例 ; 
body( 
margin:0; 
) 
div( 
width:100px; 
height:100px; 
border:2px solid black; 
background-color: yellow; 
margin:lO0px; 


) 

«div id-"divTop"»«/div» 

«div id-"divBottom"»«/div» 

我 们 给 上 下 两 个 div 元 素 添加 10px 的 边 距 ， 但 是 在 图 7-22 P, PA div 元 素 之 问 的 距离 
并 不 是 20px， 而 是 lOopx. HERETER. 


7-22 两 个 div 元 素 之 间 的 边 距 重合 在 一 起 


7.5.4 边 距 实现 对 齐 功 能 


margin 属性 除了 能 控制 元 素 的 边 距 外 , 还 有 一 个 非常 有 用 的 功能 
对 齐 方式 。 请 看 示例 : 


div( 
width:70px; 
height:70px; 
border:2px solid black; 
background-color:yellow; 


控制 元 素 水 平方 向 的 


div.left( 
margin:0 auto 0 0; 
) 
div.center( 
margin:0 auto; 
} 
div.right( 
margin:0 0 0 auto; 


} 


«div class="left"> 左 对 齐 </div> 

<div class="center"> 居 中 对 齐 </div> 

«div class="right"> 右 对 齐 </div> 

left 的 右边 距 设 为 auto 后 ， 元 素 将 居 左 对 齐 ，.right 的 左边 距 设 为 auto 后 ， 元 素 将 居 右 对 
齐 ，.center 中 的 左右 边 距 都 为 auto， 元 素 将 居中 对 齐 。 效 果 如 图 7-23 所 示 ( 如 果 页 面 在 正 中 并 
没有 出 现 期 望 的 结果 ， 请 确认 是 否 给 页 面 添加 了 正确 的 文档 类 型 声明 )。 


7-23 ”使 用 margin 属性 控制 元 素 水 平 对 齐 方式 


7.6 overflow 属性 


当 我 们 设 定 元 素 内容 区 域 的 宽度 和 高 度 时 , 元 素 实际 所 包含 的 内 容 可 能 会 超出 所 设 定 的 范 
围 ， 默 认 情 况 下 ， 超 出 的 部 分 依旧 可 见 。 如 果 想 改变 它 ， 可 使 用 CSS 提供 的 overflow 属性 。 


cM 
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overflow 的 属性 值 可 以 是 visible, hidden. scroll auto， 默 认 值 为 visible。 下 面 的 代码 展 
示 了 这 4 个 属性 值 的 不 同 含义 : 


pt 


width:100px; 
height:100px; 
float:left; 
margin:l0px; 
background-color: yellow; 

} 

p.visible( 
overflow:visible; 

} 

p.hidden( 
overflow:hidden; 

) 

p.scroll( 
overflow:scroll; 

) 

p.auto( 
overflow:auto; 


) 


«p class="visible"> 有 时 ,元 素 的 内 容 区 域 小 于 元 素 实际 所 包含 的 内 容 , 使 用 Css 提供 的 overflow 
属性 可 控制 超出 内 容 区 域 的 部 分 该 如 何 显示 。</p> 
«p class="hidden"> 有 时 , 元 素 的 内 容 区 域 小 于 元 素 实际 所 包含 的 内 容 , A css 提供 的 overflow 
属性 可 控制 超出 内 容 区 域 的 部 分 该 如 何 显示 。</p> 
«p class="scroll"> 有 时, 元 素 的 内 容 区 域 小 于 元 素 实际 所 包含 的 内 容 , 使 用 css 提供 的 overflow 
属性 可 控制 超出 内 容 区 域 的 部 分 该 如 何 显示 。</p> 
<p class="auto"> 有 了 时， 元素 的 内 容 区 域 小 于 元 素 实际 所 包含 的 内 容 ， 使 用 css 提供 的 overflow 
属性 可 控制 超出 内 容 区 域 的 部 分 该 如 何 显示 。</p> 


p 元 素 的 长 度 和 宽度 都 被 限制 在 100px， 但 是 其 中 的 文字 会 超出 p 元 素 所 包含 的 范围 ， 通 


过 改变 overflow 属性 可 达到 不 同 的 效果 ， 如 图 7-24 所 示 。 
7-24 overflow 属性 不 同属 性 值 的 效果 (IE7) 


EUR 
overflow 属性 值 为 visible 时 ， 超 出 的 内 容 将 会 显示 出 来 ，hidden 将 隐藏 超出 的 部 分 ，auto 
会 在 水 平和 竖 直方 向 添加 滚动 条 ，scroll 会 在 需要 的 时 候 添 加 滚动 条 。 


7.7 ”元素 类 型 和 display 属性 


在 第 一 篇 中 ， 我 们 讲 到 COHTML 元 素 可 分 为 两 大 基本 类 型 : 块 级 (Block-level) 元 素 和 内 联 
(Inline) 元 素 。 像 div. p 一 类 会 独占 一 行 的 元 素 就 是 块 级 元 素 ， 而 span, a 一 类 的 不 产生 换行 的 
元 素 就 是 内 联 元 素 。 

盒 模型 相关 的 属性 (边框 、 填 充 和 边 距 属性 ) 对 两 种 类 型 的 元 素 都 是 起 作用 的 ， 但 是 对 于 内 
联 元 素 , 个 别 浏览 器 的 显示 效果 不 尽 相 同 。 而 7.4 节 介 绍 的 有 关 维 度 的 属性 只 适用 于 块 级 元 素 。 
有 没有 办 法 改变 不 同类 型 元 素 的 显示 方式 ? CSS 的 display 属性 就 可 以 做 到 。 

display 属性 的 作用 就 是 改变 (X)HTML 元 素 的 显示 方式 ， 它 的 属性 值 相 当 多 ， 这 里 只 介绍 
与 本 章 相关 的 几 个 : block, inline, inline-block 和 run-in， 其 余 属性 值 的 含义 和 用 法 会 在 后 续 
章节 中 陆续 地 介绍 。 


7.7.1 block 和 inline 
使 用 声明 display:block 和 display:inline 就 可 以 使 任何 元 素 满足 块 级 或 内 联 元 素 的 显示 特 
性 。 请 看 如 下 示例 : 
span( 
height:100px; 
width:300px; 


background-color: yellow; 


) 


«span»span 元 素 默 认为 内 联 元 素 ，height 和 width 属性 对 其 不 起 作用 。</span> 


此 时 ， 代 码 效果 如 图 7-25 所 示 ，span 元 素 仍 按照 内 联 元 素 的 方式 显示 ，height 和 width 属 
性 都 没有 起 作用 。 


7-25 ”内 联 元 素 的 默认 显示 效果 ， 维 度 相关 的 属性 不 起 作用 
如 果 给 span 元 素 添加 display:block: 75:8] , 则 浏览 器 会 完全 按照 块 级 元 素 显示 属性 泻 染 该 元 


素 ( 见 图 7-26)。 


7-26 EAH display 属性 为 block 后 的 显示 效果 
同样 ， 更 改 块 级 元 素 的 display 属性 为 inline 后 ， 浏 览 器 会 依照 内 联 元 素 进行 处 理 。 
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7.7.2 inline-block 


inline-block 类 型 的 元 素 含 有 内 联 元 素 和 块 级 元 素 的 部 分 特性 , 元 素 如 同文 本 一 样 会 紧 挨 着 
其 他 元 素 ， 前 后 不 产生 换行 ， 对 于 每 个 单独 的 元 素 而 言 ， 它 们 又 满足 块 级 元 素 的 特性 ，height 
和 width 属性 均 能 对 其 产生 作用 。 我 们 可 以 把 这 种 元 素 成 为 “内 联 块 ” 型 元 素 。 

但 遗憾 的 是 ， 各 个 浏览 器 对 inline-block 的 支持 都 不 是 很 好 ， 例 如 TE 中 只 对 原本 是 内 联 元 


素 起 作用 。Firefox3 之 前 版 本 的 浏览 器 则 不 识别 这 个 属性 值 ， 仍 按照 原来 的 方式 显示 元 素 。 
请 看 下 面 的 示例 : 
body{ 


font-size:12px; 
} 
div( 
margin-bottom:l0px; 
border:lpx solid black; 
) 
pt 
width:140px; 
border:lpx dashed gray; 
) 
div#div2 p( 
display:inline; 
) 
div#div3 p{ 
display:inline-block; 
} 


«div id="div1"> 抉 级 元 素 会 独占 一 行 ， 前 后 会 产生 换行 。<p> 内 联 元 素 在 其 前 后 不 会 产生 换行 ， 元 
素 会 紧 挨 着 其 他 元 素 。</p>“ 内 联 块 ”型 的 元 素 也 不 产生 换行 ， 但 每 个 单独 的 元 素 又 满足 块 级 元 素 的 特 
性 。</div> 
«div id="div2"> 块 级 元 素 会 独占 一 行 ， 前 后 会 产生 换行 。<p> 内 联 元 素 在 其 前 后 不 会 产生 换行 ， 元 
素 会 紧 挨 着 其 他 元 素 。</P>“ 内 联 块 ”型 的 元 素 也 不 产生 换行 ， 但 每 个 单独 的 元 素 又 满足 块 级 元 素 的 特 
性 。</div> 
«div id="div3"> 块 级 元 素 会 独占 一 行 ， 前 后 会 产生 换行 。<p> 内 联 元 素 在 其 前 后 不 会 产生 换行 ， 元 
素 会 紧 挨 着 其 他 元 素 。</P>“ 内 联 块 ”型 的 元 素 也 不 产生 换行 ， 但 每 个 单独 的 元 素 又 满足 块 级 元 素 的 特 
tE. </div> 


如 图 7-27 所 示 为 以 上 代码 在 Opera 浏览 器 中 的 显示 效果 。 
G 延伸 :在 Firefox 浏 览 器 中 可 以 使 用 Mozilla CSS Extensions 提供 的 -moz-inline-stack 属性 
达到 inline-block 的 显示 效果 。 请 参考 如 下 地 址 : 
http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_ Extensions 


PRINESE MEE ENT. 


Æ 7-27 block, inline #8 inline-block 属性 值 的 作用 (Opera 浏览 器 ) 


7.7.3 run-in 


run-in 可 以 让 块 级 元 素 以 内 联 方 式 融入 到 其 后 的 元 素 中 ， 比 如 下 面 的 代码 会 产生 如 图 7-28 
所 示 的 效果 (Opera 浏览 器 ): 
p.runin( 
font-family:"Times New Roman", serif; 
display:run-in; 
border:lpx dotted gray; 
) 


<p class="runin">run-in</p><p> 类 型 的 元 素 会 以 内 联 方式 融入 到 后 面 的 元 素 当中 。</p> 


run-in 类 型 的 元 素 会 以 内 联 方式 融入 到 后 面 的 元 素 当 中 。 
7-28 run-in 属性 值 的 作用 (Opera 浏览 器 ) 


全 延伸 ， 以 下 这 个 网 址 总 结 了 display 属性 的 各 个 属性 值 应 该 达到 的 显示 效果 ,并 给 出 了 当前 一 
此 主流 浏览 器 对 display 属性 的 支持 程度 : http://www.quirksmode.org/css/display.html 
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任何 COHTML 元 素 都 被 浏览 器 视 为 一 个 个 的 矩形 区 域 ， 在 CSS 中 用 盒 模型 (Box Model)ix 
个 概念 来 描述 每 个 元 素 。 盒 模型 包含 如 下 4 个 部 分 : 内容、 填充 、 边 框 和 边 距 。 

内 容 区 域 由 元 素 本 身 包 含 的 内 容 多 少 而 定 , 内 容 外 面 是 填充 , 表示 内 容 到 边框 之 间 的 空间 ， 
而 边 距 位 于 边框 外 侧 ， 表 示 本 元 素 与 其 他 元 素 之 间 的 距离 。 

width 和 height 属性 可 以 控制 盒 模型 中 内 容 区 域 的 宽度 和 长 度 ， 而 整个 盒子 的 宽度 和 长 度 
需要 再 加 上 填充 、 边 框 和 边 距 所 占 的 空间 。CSS 还 提供 了 设 定 最 小 、 最 大 维度 的 属性 。 

COHTML 元 素 分 为 两 大 基本 类 型 : 块 级 元 素 和 内 联 元 素 ， 不 同类 型 元 素 的 显示 方式 各 异 。 
CSS 的 display 属性 可 以 更 改元 素 的 显示 方式 ， 不 管 它们 本 身 是 什么 类 型 的 元 素 。 

下 一 章 将 向 读者 介绍 有 关 浏 览 器 兼容 性 问题 以 及 相应 的 解决 方案 。 
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最 让 Web 设计 人 员 感 到 头疼 的 就 是 处 理 众多 浏览 器 的 兼容 性 ， 由 于 不 同 浏览 器 对 CSS x 
持 程度 和 解析 方式 的 不 同 ， 同 一 页 面 在 不 同 浏览 器 中 的 效果 往往 相去 甚 远 。 本 章 将 向 读者 介绍 
- 些 解决 浏览 器 兼容 性 问题 的 基本 方法 ， 并 说 明 如 何 针 对 特定 的 浏览 器 创建 样式 。 
在 后 面 的 章节 中 ,我 们 随时 会 遇 到 各 种 各 样 的 兼容 性 问题 ， 使 用 本 章 介绍 的 方法 就 可 以 进 
行 解决 。 读 者 也 可 以 先 跳 过 本 章 继续 阅读 后 面 的 内 容 ， 当 遇 到 问题 时 再 来 参考 相关 的 内 容 。 
本 章 主要 内 容 
IE 的 条 件 注 释 
常用 的 CSS Hacks 技术 
如 何 给 特定 浏览 器 添加 样式 
如 何 正确 使 用 Hacks 技术 


8.1 条 件 注 释 


条 件 注释 (Conditional Comments) 是 IE 浏览 器 所 特有 的 ， 它 能 够 对 浏览 器 的 类 型 和 版 本 进 
行 判 定 。 


8.1.1 条 件 注释 的 基本 结构 


条 件 注释 有 以 下 两 种 形式 (同时 也 列 出 了 CYHTML 中 一 般 注释 的 形式 ): 

<!-- IE 支持 的 条 件 注释 结构 --> 

<!--[if 表达 式 ] > HTML <! [endif]--> 

<! [if 表达 式 ] > HTML <! [endif]> 

第 一 种 条 件 注释 中 的 内 容 可 以 被 正 5 及 其 以 后 版 本 的 浏览 器 支持 ， 当 表达 式 为 真 时 ， 其 中 
的 内 容 就 会 被 浏览 器 解析 ， 和 否则 浏览 器 会 忽略 掉 其 中 的 内 容 。 第 二 种 条 件 注释 中 的 内 容 除了 能 
被 IE5 及 后 续 版 本 解析 外 , 还 能 被 其 他 浏览 器 所 识别 , 但 是 这 些 浏览 器 不 会 在 意 表 达 式 的 真 假 。 

表达 式 由 特征 (Feature)、 操 作 符 (Operator) 和 数值 (Value) 组 成 ， 表 8-1 总 结 了 表达 式 中 的 合 
法 内 容 以 及 它们 的 用 法 和 含义 。 


表 8-1 表达 式 中 的 合法 内 容 以 及 它们 的 含义 


说 明 


正 为 特征 值 ， 表 示 是 正 浏览 器 
整数 或 浮 点 数 表示 浏览 器 的 版 本 号 ， 版 本 号 可 精确 至 小 数 点 后 面 4 位 
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续 表 


! [i£ 'TE] dem "3E(NOT)" 
It [ifltIE 5.5] dem "fT ess than)" 
lte [if Ite IE 6] 表示 “ 低 于 或 等 于 (less than or equal)” 


表示 “高 于 (greater than)” 
表示 “高 于 或 等 于 (greater than or equal)” 
表示 子 表达 式 
表示 “与 (AND)” 


& | [if (gt IE 5) & (tIEN] 


| [i£ QE 6) | ŒE 7)] 表示 “或 (OR)” 


表示 “ 真 (TRUE)” 


dcm "(FALSE)" 


8.1.2 ”条件 注释 举例 


1. 判断 浏览 器 类 型 

请 看 示例 : 

sicc LE RS 

<h1> 您 正在 使 用 微软 公司 的 Internet Explorer 浏览 器 </h1> 
<! [endif]--» 

<![if !IE]» 

<h1> 您 正在 使 用 非 微软 公司 的 浏览 器 </h1> 


<![endif]> 


我 们 分 别 使 用 TEG 和 Firefox 2.0 打开 这 个 页 面 。 在 图 8-1 中 ， 上 图 显示 了 第 一 个 条 件 注释 
中 的 文字 ， 因 为 当前 浏览 器 是 正 ， 条 件 表达 式 为 真 ， 对 于 第 二 个 注释 ， 表 达 式 返回 为 假 ， 因 此 
IEG 没有 显示 其 中 的 文字 。Firefox 浏览 器 只 能 解析 第 二 种 写法 的 条 件 注释 ， 因 此 显示 了 其 中 的 
文字 。 需 要 注意 的 是 ，Firefox 等 非 IE 浏览 器 不 能 对 表达 式 的 返回 值 进行 判断 ， 所 以 不 要 从 这 


些 浏览 器 的 角度 出 发 添加 人 逻辑 代码 。 
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2. 判断 浏览 器 版 本 
通过 条 件 注 释 ， 我 们 可 以 很 方便 地 给 TE 浏览 器 或 不 同 版 本 的 TE. 浏览 器 添加 特定 的 样式 ， 
请 看 示例 (这 里 给 出 完整 的 代码 ): 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"» 
<html xmlns-"http://www.w3.0rg/1999/xhtml"» 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 条 件 注释 </title> 
«style type="text/css"> 
pt 
padding:10px; 
color:lime; 


background:black; 

) 

</style> 

Sa kA Es 

<style type="text/css"> 

pi 
color:yellow; 
background:orange; 
font-size:0.8em; 

} 

</style> 

<! [endif]--> 

«1!--[if IE 6]» 

«style type="text/css"> 

pt 
color:white; 
background:red; 
font-size:1.2em; 

) 

</style> 

<t [endif]--» 

</head> 


<body> 
<p> 条 件 注释 使 得 给 IE 浏览 器 或 不 同 版 本 的 TE 浏览 器 添加 特定 的 样式 成 为 可 能 。</p> 
</body> 
</html> 
分 别 用 Firefox、 正 7 和 正 6 打开 该 页 面 ， 从 图 8-2 可 以 看 出 通过 条 件 注释 可 实现 单独 给 特 
定 版 本 的 正 浏览 器 指定 样式 。 
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8-2 ”通过 条 件 注释 给 不 同 版 本 的 IE 浏览 器 指定 特定 样式 (由 上 至 下 依次 为 Firefox、IE7 和 1E6) 


8.2 CSS Hacks 
CSS Hacks 是 指 利用 不 同 浏览 器 对 CSS. 支持 程度 和 解析 方式 的 不 同 来 解决 浏览 器 存在 的 


问题 。 


8.2.1 利用 选择 符 


IE6、IE7 和 Firefox 对 CSS 选择 符 的 支持 程度 不 同 ， 因 此 可 利用 它 来 给 不 同 浏览 器 提供 专 
用 的 CSS 样式。 表 8-2 总 结 了 不 同 浏览 器 对 选择 符 的 支持 情况 。 


表 8-2 各 浏览 器 对 CSS 选择 符 的 支持 程度 


选择 符 Firefox2 
*( 通 用 选择 符 ) | 支持 
>( 子 选择 符 ) 支持 
+( 人 接见 弟 选择 符 ) | 基本 支持 


[att]( 属 性 选择 符 ) 
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比如 我 们 可 以 利用 属性 选择 符 为 TEG 和 Firefox 添加 不 同 的 代码 : 
div.highlighted( 

color:red; /* IE6 中 ， 颜 色 为 红色 */ 
d 
div[class-"highlighted"]( 

color:orange; /* IET. Firefox 中 ， 颜 色 为 橙色 */ 
) 


由 于 以 上 两 条 CSS 规则 的 确定 度 相同 (请 参考 第 6 章 的 相关 内 容 ), Firefox 支持 后 面 的 属性 
选择 符 ， 因 此 IEG 中 div 元 素 中 文字 为 红色 ，Firefox 则 采用 后 面 的 规则 显示 为 栖 色 。 注 意 只 有 
在 选择 符 的 确定 度 相同 时 ， 才 能 通过 规则 出 现 的 先后 顺序 来 处 理 兼容 性 。 比 如 下 面 的 写法 就 不 
能 对 IE6 和 Firefox 进行 区 别处 理 : 


diviboxl( 
color:red; /* IE6. IE? Ñl Firefox 中 ， 颜 色 为 红色 */ 


) 
div[id-"boxl"]( 
color:orange; /* 此 声明 不 起 作用 ， 属 性 选择 符 确定 度 小 于 id 选择 符 */ 
} 
由 于 属性 选择 符 的 确定 度 小 于 id 选择 符 ， 任 何 浏览 器 都 不 会 应 用 此 规则 ， 尽 管 它 位 于 使 
用 id 选择 符 的 规则 之 后 。 
子 选择 符 也 可 以 使 我 们 能 够 区 分 IEG 与 Firefox， 例 如 : 
div .normal( 
color:green; /* IE6 中 颜色 为 绿色 */ 
) 
div».normal( 
color:blue; /* IE7 Ñ Firefox 中 颜色 为 蓝 色 */ 


8.2.2 ”利用 !important 声明 

IE6 对 !important 声明 支持 不 够 完善 ， 当 同一 CSS 规则 中 存在 两 条 相同 的 样式 声明 时 ，IE6 
总 会 采用 后 出 现 的 声明 (即使 前 面 的 样式 使 用 了 !important 声明 )。 比 如 : 

pt 


background:red !important; /* IE7 以 及 Firefox 中 ，p 元 素 背景 色 为 红色 */ 
background:green; /* IE6 中 ，p 元 素 背 景色 为 绿色 */ 


8.2.3 利用 @import 规则 


CSS 不 只 用 于 控制 Web 页 面 如 何 显示 在 浏览 器 中 ， 它 还 能 控制 页 面 输出 到 其 他 媒介 中 的 
样式 。 第 17 章 将 介绍 的 @media 规则 就 能 指定 样式 所 适用 的 媒介 。 当 使 用 @import 规则 导入 外 


部 样式 表 时 ， 可 同时 指定 它 所 适用 的 媒介 ， 比 如 : 

Gimport url("all.css") all; /* 适用 于 所 有 媒介 */ 

Gimport url("print.css") print; /* 只 适用 于 打印 媒介 */ 

IE 浏览 器 不 支持 带 有 媒介 定义 的 @import 规则 ， 因 此 可 利用 这 一 点 为 非 TE. 浏览 器 添加 特 
定 的 代码 ， 比 如 : 

/* non-ie.css 中 的 样式 将 适用 于 所 有 非 TE 浏览 器 */ 


Qimport url("non-ie.css") all; 


8.3 正确 使 用 Hacks 技术 


8.3.1 避免 乱用 Hacks 


CSS Hacks 技术 为 解决 浏览 器 兼容 性 问题 提供 了 方便 ， 它 是 那些 富有 经 验 的 开发 人 员 多 年 
总 结 出 来 的 ， 并 不 属于 CSS 的 标准 。 有 时 候 ， 浏 览 器 之 间 的 细微 差别 是 可 以 接受 的 ， 或 者 由 
于 其 他 技术 的 限制 ， 使 我 们 开发 的 Web 应 用 只 能 运行 于 某 一 种 浏览 器 上 ， 这 时 我 们 就 没有 必 
要 使 用 Hacks。 

另外 ， 有 一 些 Hacks 技术 已 经 严重 影响 了 代码 的 正确 性 ， 它 们 利用 浏览 器 解析 样式 代码 中 
存在 的 某 些 问题 来 实现 Hacks 技术 ， 大 部 分 违反 了 CSS 规范 ， 属 于 非法 的 属性 ， 因 此 不 建议 
使 用 。 


8.3.2 良好 的 习惯 


将 用 于 解决 浏览 器 兼容 性 问题 的 代码 放 在 独立 的 文件 中 是 一 个 良好 的 习惯 , 这 样 做 使 样式 
表 更 具 模 块 化 ， 便 于 浏览 和 维护 。 利 用 (X)HTML 的 link 元 素 或 者 CSS 的 @import 规则 可 以 将 
这 些 外 部 样式 导入 到 所 需 页 面 中 ， 比 如 : 

<link rel="stylesheet" type="text/css" href-"css/ForAll.css" /> 

Soe rs 

<link rel="stylesheet" type="text/css" href="css/ForIE6Only.css" /> 

«! [endif]--» 

<I [if IE qp 

<link rel="stylesheet" type="text/css" href="css/ForIE7Only.css" /> 

<l [endif]--» 

所 有 的 浏览 器 都 将 应 用 ForAllcss 中 的 样式 规则 ， 而 后 面 通过 使 用 条 件 注释 和 link 元 素 ， 
IEG 和 IE7 将 分 别 使 用 针对 自己 的 CSS 文件 。 

另外 ， 应 当 在 Hacks 代码 中 添加 适当 的 注释 以 说 明代 码 的 用 途 ， 解 决 了 什么 问题 ， 使 他 人 
能 较 快 地 理解 你 的 代码 。 
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在 理想 状况 下 ， 一 份 正确 的 样式 代码 能 在 每 个 支持 CSS 的 浏览 器 中 正常 工作 。 但 遗憾 的 
是 ， 我 们 并 不 是 生活 在 理想 世界 中 ， 浏 览 器 存在 很 多 问题 ， 而 且 对 CSS 支持 程度 和 解析 方式 
不 同 。 为 了 创建 能 够 在 各 种 浏览 器 上 显示 相同 样式 的 页 面 ， Web 开发 人 员 通 过 Hacks 技术 能 
选择 性 地 对 不 同 浏览 器 应 用 不 同 地 规则 。 

本 章 介绍 了 正 浏览 器 中 的 条 件 注释 和 一 些 常用 的 CSS Hacks 技术 。 

条 件 注释 可 以 判定 用 户 是 否 使 用 正 浏览 器 和 它们 的 确切 版 本 ,通过 它 可 以 为 正 添加 特定 


的 样式 。 
利用 选择 符 的 兼容 性 、 正 对 !important 声明 和 @import 规则 支持 的 不 完整 性 ， 可 添加 针对 
浏览 器 的 特定 样式 。 


下 一 章 将 进入 本 书 的 第 三 篇 一 一 CSS 样式 设计 。 第 9 章 将 介绍 CSS 对 文本 样式 的 控制 。 


第 三 篇 CSS 样式 设计 


第 9 章 文字 处 理 


尽管 现在 的 网 页 都 含有 大 量 的 图 片 、Flash 动画 甚至 是 影片 剪辑 ， 但 文字 仍然 是 一 种 最 重 
要 的 表达 信息 的 方式 。 新 闻 、 论 文 、 科 技 情报 、 问 题解 答 等 信息 大 部 分 还 是 要 依赖 于 文字 进行 
表达 。 阅 读 文字 信息 的 舒适 程度 直接 影响 浏览 者 的 心理 感受 ， 因 此 优美 的 文字 样式 可 以 让 页 面 
显得 更 专业 ， 可 以 使 访问 者 方便 而 舒适 地 获取 所 需 的 信息 。 

CSS 提供 了 许多 专门 用 来 控制 文字 样式 的 属性 ， 比 如 字体 、 大 小 、 段 落 行 间距 等 。 这 些 样 
式 属 性 分 为 两 大 类 ， 一 类 是 针对 字体 (Eonb 的 ， 另 一 类 是 针对 文本 (Texb 的 。 本 章 将 介绍 所 有 与 
文字 相关 的 样式 以 及 如 何在 文字 设计 中 使 用 它们 。 

本 章 主要 内 容 

@ 文字 样式 在 Web 设计 中 的 重要 性 

@ ”如 何 有 效 使 用 字体 族 名 和 通用 字体 族 

@ 如 何 使 用 粗 体 、 儿 体 等 风格 样式 

e ”如 何 控制 段落 文字 样式 


9.1 字体 族 和 字号 
本 节 介 绍 的 样式 属性 主要 用 于 控制 文字 最 基本 的 外 观 ， 包 括 字 体 族 、 字 号 和 颜色 。 


9.1.1 ClearType 技术 


在 讲解 字体 样式 之 前 ， 先 介绍 一 项 与 字体 显示 相关 的 技术 ， 这 就 是 微软 公司 提出 的 
ClearType。 该 技术 用 来 提高 字体 显示 的 效果 ， 使 字体 看 上 去 更 饱满 、 更 清晰 。 图 9-1 展示 了 未 
开启 和 开启 ClearType 时 文字 显示 的 效果 。 

不 使 用 ClearType 效 果 
使 用 ClearType 效 果 


9-1 未 使 用 ClearType 和 使 用 ClearType 时 字体 效果 的 对 比 


图 9-2 是 放大 后 看 到 的 情形 ， 饮 齿 化 边缘 被 一 些 彩色 的 像素 所 填充 以 达到 抗 锯齿 效果 。 
ClearType 只 对 一 部 分 字体 有 效 ， 比 如 图 9-1 中 的 宋体 字 就 不 受 影响 。 
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9-2 ”放大 后 效果 对 比 图 (上 面 为 未 使 用 ClearType, THEAT ClearType) 


统 开 启 ClearType 效果 后 ， 浏 览 长 篇 英文 页 面 时 的 感受 还 是 会 有 很 大 不 同 的 ( 见 图 
9-3 和 图 9-4)。 图 9-3 文字 边缘 显得 比较 圆润 ， 图 9-4 的 文字 明显 有 锯齿 。 
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Abstract 


This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style 
sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured 
documents (e.g., HTML documents and XML applications). By separating the presentation style of 
documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance. 


CSS 2.1 builds on CSS2 [CSS2] which builds on CSS1 [CSS1] It supports media-specific style 
sheets so that authors may tailor the presentation of their documents to visual browsers, aural 
devices, printers, braille devices, handheld devices, etc. It also supports content positioning, table 
layout, features for internationalization and some properties related to user interface. 


CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the 
height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new 
calculation of the 'clip' property), and adds a few highly requested features which have already been 
widely implemented. But most of all CSS 2.1 represents a "snapshot" of CSS usage: it consists of 
all CSS features that are implemented interoperably at the date of publication of the 
Recommendation 


CSS 2.1 is derived from and is intended to replace CSS2. Some parts of CSS2 are unchanged in 
CSS 2.1, some parts have been altered, and some parts removed. The removed portions may be 
used in a future CSS3 specification. Future specs should refer to CSS 2.1 (unless they need 
features from CSS2 which have been dropped in CSS 2.1, and then they should only reference 
CSS2 for those features, or preferably reference such feature(s) in the respective CSS3 Module that 
includes those feature(s)). 
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9-3 FÆ ClearType 后 的 效果 


ClearType 效果 默认 是 关闭 的 ， 而 且 只 在 Windows XP 及 后 续 操作 系统 中 存在 。 如 果 要 打 
JF ClearType 效果 ， 请 在 桌面 空白 处 点 击 鼠 标 右键 ， 选 择 “属性 ”命令 ， 打 开 显示 属性 的 对 话 


框 。 然 后 选择 “外 观 ” 选 项 卡 ， 单 击 “ 效 果 ” 按 钮 ， 打 开 效果 对 话 框 。 将 “使 用 下 列 方 式 使 


幕 字体 的 边缘 平滑 ”一 项 打上 对 勾 ， 并 在 下 拉 框 里 选择 “清晰 ”， 然 后 确定 即 可 ( 见 图 9-5)。 
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CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the 
height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new 
calculation of the 'clip' property), and adds a few highly requested features which have already been 
widely implemented. But most of all CSS 2.1 represents a "snapshot" of CSS usage: it consists of 
all CSS features that are implemented interoperably at the date of publication of the 
Recommendation 


CSS 2.1 is derived from and is intended to replace CSS2. Some parts of CSS2 are unchanged in 
CSS 2.1, some parts have been altered, and some parts removed. The removed portions may be 
used in a future CSS3 specification. Future specs should refer to CSS 2.1 (unless they need 
features from CSS2 which have been dropped in CSS 2.1, and then they should only reference 
CSS2 for those features, or preferably reference such feature(s) in the respective CSS3 Module that 
includes those feature(s)) 
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9-4 未 开启 ClearType 时 的 效果 
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9-5 打开 ClearType 功能 


微软 公司 还 提供 了 一 个 名 为 ClearType Tuning 的 工具 ,用 来 调整 ClearType 细节 效果 ( 见 图 
9-6)。 可 以 用 它 来 打开 或 关闭 ClearType 功能 ， 调 整 对 比 度 、LCD 显示 条 模式 等 。 

Web 设计 人 员 在 设计 页 面 时 要 考虑 到 用 户 使 用 的 系统 可 能 没有 启动 此 功能 或 者 甚至 没有 
此 功能 。 由 于 Web 页 面 的 兼容 性 很 重要 ， 因 此 在 测试 页 面 显示 效果 时 ， 要 同时 考虑 到 开启 和 
关闭 ClearType 功能 的 两 种 情况 。 
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This setting allows you to tune ClearType on your system to your own personal preferences and for 
your display. 


中 RE The Quick Brown Fox Jumps Over the Lazy 
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9-6 用 ClearType Tuning 工具 调整 ClearType 的 细节 效果 


9.1.2 ”字体 族 


CSS 使 用 font-family 属性 来 设 定 字体 家 族 , 简单 地 说 就 是 定义 字体 外 观 。 常 见 的 中 文字 体 
有 和 宋体、 黑体、 楷体， 常见 的 英文 字体 有 Times New Roman. Arial. Tahoma 等 。font-family 
规则 的 书写 格式 如 下 : 

选择 符 (font-family: F1, 字体 2，...;} 

浏览 器 首先 查看 系统 是 否 有 第 一 个 字体 ， 若 没有 则 使 用 后 面 的 第 一 个 可 用 字体 进行 替代 。 
例如 : 

p (font-family: "TECH", "mk", "宋体";} 

浏览 器 查找 本 系统 的 字体 ， 如 果 匹 配 则 使 用 该 字体 。 假 如 某 系统 没有 微软 雅 黑 字体 而 有 黑 
体 ， 则 浏览 器 使 用 黑体 进行 替代 ， 若 黑体 也 没有 就 用 宋体 替代 。 

字体 族 的 属性 值 分 为 两 大 类 ， 一 类 是 我 们 先前 看 到 的 宋体 、Arial 这 样 的 字体 族 名 
(family-name)， 另 一 类 是 通用 族 (generic-family)。 

通过 指定 确切 的 字体 族 名 可 以 控制 元 素 使 用 哪 一 种 文字 样式 , 前 提 是 这 些 字 体 存在 于 访问 
者 的 系统 中 。 图 9-7 列举 了 一 些 常见 的 中 英文 字体 族 的 外 观 。 

通用 字体 族 是 一 种 容错 机 制 ， 当 系统 中 没有 设计 者 指定 的 任何 字体 时 ,通用 字体 族 提供 了 

-种 可 行 的 替代 方案 。 不 同 的 通用 字体 族 定义 了 若干 特定 的 字体 外 观 属 性 ， 比 如 要 求 字体 笔划 

结束 时 添加 装饰 线 或 者 要 求 字 符 宽 度 一 致 等 。 满 足 这 些 特定 属性 的 字体 都 属于 该 种 通用 字体 
族 。 设计 者 可 根据 需要 选择 不 同 的 通用 字体 族 进行 替代 。 通 用 字体 族 的 默认 字体 在 各 个 操作 系 
统 之 间 可 能 不 尽 相 同 , 一 些 浏览 器 (如 Firefox) 也 允许 用 户 自行 设置 与 通用 字体 族 相关 的 字体 ( 见 
图 9-8)。 


Arial 

Times New Roman 
Verdana 
Georgia 

Utopia 

Tahoma 
Courier New 


宋体 
黑体 
RE 


图 9-7 常见 的 中 英文 字体 


图 9-8 Firefox 中 设 定 通用 字体 族 


CSS 定义 了 5 种 通用 字体 族 ， 它 们 是 serif、sans-serif、cursive、fantasy 和 monospace. f$ 
种 通用 字体 族 都 拥有 特定 的 字体 特征 ， 但 是 具体 选用 哪 一 个 字体 ， 还 要 由 系统 、 浏 览 器 或 是 语 
言 种 类 确定 。 请 看 下 面 这 段 代 码 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 
«html xmlns-"http://www.w3.0rg/1999/xhtml" lang-"en"» 
<head> 


| 2l 
| 网 页 布局 开发 指南 


«meta http-equiv-"Content-Type" content-"text/html; charset-utf-8" /> 
<title> 字 体 族 </title> 
</head> 


<body> 

«hl style="font-family:serif;">1. serif family 带 衬 线 字 体 </h1> 

<hl style="font-family:sans-serif;">2. sans-serif family 无 衬 线 字体 </h1> 

«hl style-"font-family:cursive;"»3. cursive family 草书 字体 </h1> 

«hl style-"font-family:fantasy;"»4. fantasy family 装饰 字体 </h1> 

«hl style-"font-family:monospace;"»5. monospace family 等 宽 字 体 </h1> 

</body> 

</html> 

注意 ， 我 们 在 html 元 素 中 将 lang 属性 设置 为 en， 在 meta 元 素 中 将 字符 集 定 为 uft-8。 图 
9-9 到 图 9-11 为 以 上 代码 在 不 同 浏览 器 中 显示 的 效果 (由 于 系统 安装 的 字体 不 同 , 读者 机 器 上 的 
显示 效果 可 能 与 图 中 所 示 不 符 )。 


1. serif family 带 衬 线 字体 
2. sans-serif family 无 衬 线 字体 


3. cursive family 草书 字体 
4. FANTASY FAMILY 装饰 字体 
5. monospace family 等 宽 字 体 


9-9 Internet Explorer 在 Windows XP 中 通用 字体 族 的 显示 


1. serif family 带 衬 线 字 体 

2. sans-serif family 无 衬 线 字 体 
3. cursive family 草书 字体 

4. fantasy family 装饰 字体 


5. monospace family 等 宽 字 体 


9-10 Firefox 在 Windows XP 中 通用 字体 族 的 显示 


l. Serif Family 带 衬 线 字体 
2. Sans-Serif Family 无 衬 线 字 体 


3. Cursive Family 草书 字体 


4. Fantasy Family 装饰 字体 
5. Monospace Family 等 宽 字 体 


9-11 Opera 在 Windows XP 中 通用 字体 族 的 显示 


通用 字体 族 所 定义 的 各 种 属性 都 是 针对 西 文字 符 的 , 但 在 汉字 中 也 能 找 出 类 似 的 属性 。 尽 
管 我 们 的 网 页 大 部 分 内 容 使 用 的 是 中 文 ， 但 还 是 免不了 包含 英文 和 一 些 阿 拉 伯 数 字 ， 因 此 需要 
了 解 一 些 有 关 通 用 字体 族 的 知识 。 设 计 者 在 定义 font-family 属性 时 应 提供 一 个 通用 字体 ， 当 用 
户 系统 中 不 存在 任何 具体 的 字体 时 ， 设 计 者 仍然 可 以 指定 一 种 具有 某 些 样式 特征 的 字体 ， 和 否则 
替代 字体 的 选择 权 就 完全 由 浏览 器 自己 掌握 了 。 

下 面 举例 说 明 。 假 如 你 想 将 某 一 段 文字 字体 设 为 Times New Roman 这 样 带 有 衬 线装 饰 的 
字体 ， 但 是 浏览 者 的 系统 中 没有 安装 这 个 字体 (尽管 这 种 情况 极为 少见 )， 这 时 你 可 以 在 其 后 添 
加 一 个 通用 字体 族 serif， 代 码 如 下 所 示 : 

font-family:"Times New Roman", serif; 

在 学 习 了 下 面 的 内 容 后 你 会 知道 ，serif 字体 族 所 包含 的 字体 都 是 带 有 和 衬 线 的 。 所 以 即使 没 
有 Times New Roman， 你 还 能 指定 一 个 具有 类 似 样式 的 字体 。 
© 注意 : 中 文字 休 名 和 多 个 单词 的 字体 名 要 加 上 双 引 号 通用 字体 名 是 关键 字 ， 不 能 加 

引号 。 

1. serif 字体 

serif 在 印刷 业 的 术语 中 含义 是 衬 线 ， 特 指 加 在 字母 上 做 装饰 的 细 线 ， 添 加 细 线 的 字符 更 容 
易 阅 读 。 与 sans-serif 字体 族 相 比 ，serif 更 能 表现 出 比划 粗细 的 差别 ， 且 每 个 字母 宽度 是 不 一 
样 的 。 比 如 图 9-12 中 字母 了 的 第 一 笔 和 第 二 笔 的 粗细 差别 就 很 明显 ， 另 外 , 字母 i 的 宽度 要 小 
于 字母 m 的 宽度 。 


Times New Roman 


Georgia 宋体 Song 


9-12 ”常见 的 serif 字体 族 字体 
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serif 字体 通常 用 于 正常 文本 ， 英 文 一 般 用 Times New Roman 作为 默认 字体 ， 常 见 的 还 有 
宋体 、Georgia。 注 意 这 些 字体 的 字母 在 每 一 笔划 末端 带 有 衬 线装 饰 。 

2. sans-serif 字体 

sans 表示 没有 ， 因 此 sans-serif 表示 不 带 有 衬 线 的 字体 ， 笔 划 结束 处 是 平 的 ， 没 有 多 余 的 
修饰 ， 图 9-13 对 比 了 serif 与 sans-serif 的 一 些 区 别 。sans-serif 字体 笔划 的 粗细 基本 一 致 ， 看 起 


来 比较 匀称 。 
| 细 粗细 
x EX ioo 
属于 serif 字体 族 的 属于 sans-serif 字体 族 的 
Times New Roman 字 体 Arial 字 体 


9-13 serif 与 sans-serif 字体 族 的 区 别 


常见 的 sans-serif 字体 有 Arial. Verdana. Futura. Tahoma. Helvetica 和 中 文 的 黑体 ， 如 
图 9-14 所 示 。 


Arial Arial Black 
Verdana Futura 
Tahoma 黑体 


9-14 ”常见 的 sans-serif 字体 族 字 体 


3. cursive 字体 

cursive 在 印刷 术语 中 的 含义 是 草 体 , 即 一 种 模仿 手写 体 的 印刷 字体 。 该 种 字体 含有 连 写成 
， 和 用 笔 快 速写 出 来 的 效果 类 似 ( 见 图 9-15). cursive 字体 族 较 难 辨认 ， 基 本 上 很 少 使 用 ， 通 

- 些 阿 拉 伯 国家 的 文字 会 使 用 这 类 字体 。 


Comic Sans MS 


Monotype Corsiva 
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9-15 ”常见 的 cursive 字体 族 字 体 


cursive 默认 的 字体 族 没 有 标准 ， 不 同系 统 、 不 同 浏览 器 之 间 也 存在 差异 。 通 常 使 用 的 字体 
有 : Comic Sans, Monotype Corsiva, Adobe Poetica 和 Caflisch Script 等 。 


4. fantasy 字体 


fantasy 字体 是 指 那些 带 有 装饰 性 内 容 的 字体 ,通常 是 一 些 没有 规则 的 、 看 起 来 比较 奇异 的 
字体 ， 图 9-16 列举 的 Critter 和 Studz 字体 就 属于 fantasy 字体 。Fantasy 字体 样式 的 不 规则 性 使 
其 很 难 进 行 设计 ， 因 此 应 避免 使 用 。 


€RITTE 
SCaOZ 


图 9-16 fantasy 字体 


5. monospace 字体 

monospace 的 含义 是 等 间距 ， 即 每 个 字符 之 间 的 距离 是 相等 的 ， 不 论 是 字母 1 还 是 字母 w， 
它们 所 占 空间 是 相等 的 ， 很 像 老 式 打字 机 的 效果 ( 见 图 9-17)。 本 书 所 有 代码 示例 使 用 的 字体 就 
是 等 宽 的 ， 这 种 字体 看 起 来 很 规整 ， 行 与 行 之 间 字 符 是 对 齐 的 。 


Courier Courier New 
Consolas 宋体 Song 


9-17 ”常见 的 monospace 字体 族 字体 


常用 的 monospace 字体 族 是 Courier New， 其 他 还 包括 Consolas、 宋 体 、Everson Mono 等 。 


9.43 ”文字 度量 


本 节 将 讲解 一 些 有 关 文 字 度量 的 知识 ， 这 会 使 你 更 好 地 理解 和 掌握 如 何 控制 文字 的 大 小 。 
该 部 分 内 容 只 适用 于 西 文字 符 ， 你 也 可 以 略 过 此 部 分 内 容 直接 阅读 后 面 内 容 ， 这 只 是 作为 下 节 
内 容 的 补充 。 

在 印刷 领域 里 ， 文 字 大 小 是 通过 计算 字 的 外 形 的 点 point， 简 写 为 pb 值 来 衡量 的 ， 这 种 方 
法 称 为 点 制 (Point System)。 点 制 有 以 下 三 种 : 欧洲 大 陆 点 制 ， 又 称 为 迪 多 点 制 (Didob，1 点 相 
当 于 0.376065mm; 英美 点 制 ， 又 称 十 二 点 制 (Pica)，1 点 相当 于 0.351461mm; 此 外 还 有 一 种 英 
美 点 制 ，1 点 相当 于 1/72 英寸 ， 即 0.352778mm。CSS 使 用 的 就 是 最 后 一 种 。 

为 了 理解 如 何 用 点 来 衡量 文字 的 大 小 ， 需 要 知道 如 下 一 些 概念 x- 高 度 (x-height)、 字 母 上 
部 (Ascender)、 字 母 下 部 (Descender) 和 基线 (Baseline)。 通 过 图 9-18 就 可 以 很 清楚 地 看 到 各 个 概 
念 所 代表 的 含义 。 
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字母 上 部 


x^ 


oO $ 字母 下 部 


图 9-18 x- 高 度 、 字 母 上 部 、 字 母 下 部 与 基线 
x- 高 度 是 指 小 写字 母 x 的 竖 直方 向 上 的 大 小 ， 字 母 上 部 是 指 小 写字 母 中 高 出 其 他 字母 的 部 
分 ， 比 如 h, b, d 的 上 部 。 字 母 下 部 是 指 小 写字 母 比 其 他 小 写字 母 位 置 低 的 部 分 ， 比 如 让 g 
的 下 部 。 小 写字 母 放置 在 一 条 基线 上 。 
注意 不 同 字体 的 x 高 度 可 能 会 不 一 致 ， 即 使 它们 的 点 值 是 相同 的 。 比 如 Arial 字体 的 x 高 
度 值 就 要 比 同 点 值 的 Times New Roman 字体 的 x 高 度 值 大 。 


9.1.4 字体 大 小 


适当 地 将 字体 大 小 相 异 的 文字 放置 在 一 起 会 突出 层次 感 ， 增 强 视觉 效果 。 通常 标 题 文字 要 
大 于 正文 文字 ， 表 示 重 要 信息 的 文字 大 于 次 要 信息 的 文字 。CSS 通过 font-size 属性 为 文字 设 定 
大 小 , 该 属性 的 属性 值 可 以 是 绝对 大 小 (Absolute Size)、 相 对 大 小 (Relative Size)、 长 度 值 (Length) 
和 百分数 (Percentage)。 


1. 绝对 大 小 


CSS 中 使 用 如 下 7 个 关键 字 来 定义 文字 的 绝对 大 小 : xx-small, x-small, small, medium, 
large、x-large、xx-large。 文 字 具 体 的 大 小 是 由 浏览 器 决定 的 ，medium 所 表示 的 就 是 浏览 器 默 
认 的 文字 大 小 值 ， 其 余 属性 值 都 以 固定 的 比例 因数 放大 或 缩小 这 个 默认 值 。CSS1 规范 中 定义 
这 个 比例 因数 为 1.5， 经 验证 明 这 个 比例 过 大 ， 因 此 CSS2 规定 这 个 值 为 1.2。 假 如 medium 大 
小 为 10pt， 则 large 大 小 就 为 12pt 左右 。 但 这 也 不 是 绝对 的 ， 为 了 获得 更 好 的 阅读 效果 ， 比 例 
因数 在 不 同 的 大 小 等 级 会 发 生变 化 。 

下 面 这 段 代 码 在 IE, Firefox 和 Opera 浏览 器 中 显示 的 效果 如 图 9-19 所 示 : 

«p style-"font-size:xx-small;"»xx-small 中 文 </p> 

«p style-"font-size:x-small;"»x-small 中 文 </p> 

«p style-"font-size:small;"»small 中 文 </p> 

«p style="font-size:medium;">medium 中 文 </p> 

«p style-"font-size:large;"»large 中 文 </p> 

«p style-"font-size:x-large;"»x-large 中 文 </p> 

«p style-"font-size:xx-large;"»xx-large 中 文 </p> 

可 以 看 到 在 不 同 浏览 器 中 的 文字 大 小 是 一 致 的 , 但 是 文字 的 行 间距 以 及 字体 的 显示 效果 还 
是 有 着 细微 的 差别 。 
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xri-:zall 中 文 xx-smell 中文 -small 中 文 

rml Pp aczmll 中 文 
x-:zall TX 

snall 中 文 small 中 文 
snall 中 文 

medium 中 文 medium 中 文 
medium 中 文 Ce 

1 he 
a mcm arge " : 

T 8 x-large 中 文 

x-large "PX x-large 中 文 
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9-19 ”从 左 向 右 依次 是 1IE6、Firefox2 和 Opera9 中 的 显示 效果 


2. 相对 大 小 


表示 相对 大 小 的 属性 值 只 有 两 个 :smaller 和 larger。 赋 予 该 属性 值 的 元 素 的 文字 大 小 将 相 
对 于 其 父 元 素 的 进行 缩放 ， 缩 放 的 比例 因数 约 为 1.2， 这 与 表示 绝对 大 小 的 属性 值 之 间 的 比例 
因数 相同 。 请 看 下 面 的 示例 : 

p#paral (font-size:small;]) 

pféparal em (font-size:larger;] 

pfpara2 (font-size:large;] 

p#para2 em (font-size:smaller;] 

pfpara3 (font-size:xx-large;] 

pfépara3 em (font-size:larger;] 


«p id="paral"> 这 段 文字 包含 了 一 些 <em> 非 常 重 要 </em> 的 内 容 </p> 
«p id="para2"> 这 段 文字 包含 了 一 些 <em> 非 常 重要 </em> 的 内 容 </p> 
«p id="para3"> 这 段 文字 包含 了 一 些 <em> 非 常 重要 </em> 的 内 容 </p> 


我 们 将 三 个 段落 的 文字 大 小 分 别 设置 成 为 small、large 和 xx-large、 其 内 部 的 em 元 素 文字 
大 小 分 别 设 为 larger、smaller 和 larger， 由 于 larger 和 smaller 设 定 的 缩放 比例 因数 一 样 ， 所 以 
前 两 个 段落 中 em 元 素 文字 大 小 是 一 致 的 ( 见 图 9-20)。 


这 段 文字 也 含 7 一些 闫 常 重要 的 内 容 
这 段 文字 包含 了 一 些 莫 常 重要 的 内 容 


kEGOxERSI—EJdE A HE Nu 
图 9-20 设 定 文字 相对 大 小 
3. 长 度 值 


前 面 介绍 过 ， 在 传统 印刷 领域 里 用 点 制 来 描述 字符 大 小 ， 但 在 Web 设计 中 还 可 以 使 用 其 
他 一 些 值 来 描述 。CSS 可 以 用 长 度 值 来 描述 字体 大 小 ， 我 们 在 第 二 篇 第 5 章 中 讲解 CSS 度量 
的 时 候 已 经 有 所 介绍 ， 现 在 再 来 温习 一 遍 。 
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长 度 值 带 有 单位 ， 单 位 类 型 可 分 为 以 下 两 种 。 

e ”绝对 长 度 单位 :包括 pt( 点 )、mm( 毫 米 )、cm( 厘 米 )、i( 英 寸 ) 和 pc(12 点 )。 

e ”相对 长 度 单位 : 包括 ex( 相 应 字体 的 x 高 度 ， 即 x-height)、em( 相 应 字体 的 “font-size” 

属性 值 ) 和 px( 像 素 )。 

当 使 用 绝对 长 度 时 ， 绝 对 不 要 认为 这 就 是 字符 显示 在 屏幕 上 的 大 小 。 绝 对 长 度 单 位 在 打印 
时 或 在 屏幕 显示 设备 的 物理 尺寸 已 知 时 才 比 较 有 用 。 比 如 Microsoft Word 就 使 用 点 来 控制 字体 
大 小 ， 所 以 尽管 同样 的 文档 在 不 同 分 辩 率 或 者 不 同 大 小 显示 器 上 显示 的 大 小 不 尽 相 同 ， 但 是 打 
印 出 来 都 是 一 致 的 。 

相对 长 度 单位 中 的 ex 表示 英文 字符 x 的 高 度 ， 会 根据 字体 族 的 不 同 而 变化 。em 用 在 
font-size 属性 上 表示 相对 其 父 元 素 font-size 的 属性 值 ， 若 父 元 素 尚 未 指定 这 个 属性 ， 则 相对 于 
浏览 器 默认 的 文字 大 小 。 单 位 px 对 于 我 们 来 说 再 熟悉 不 过 了 ， 显 示 器 上 的 图 像 就 是 由 一 个 个 
像素 组 成 的 ， 用 px 作为 文字 大 小 单位 是 Web 页 面 设 计 中 最 常见 的 方式 之 一 

4. 百分数 

百分比 和 em 单位 效果 一 样 ， 它 们 都 是 基于 父 元 素 的 文字 大 小 来 确定 本 元 素 文字 大 小 的 。 
100% 相 当 于 lem，150% 相 当 于 1.5em。 


5. 字体 属性 值 的 选用 


目前 Web 页 面 中 的 文字 设计 有 两 大 方式 ， 一 种 是 所 有 文字 大 小 使 用 像素 作为 单位 ， 页 面 其 
他 元 素 大 部 分 也 使 用 像素 作为 单位 ， 另 一 种 就 是 使 用 绝对 大 小 、 相 对 大 小 和 长 度 值 中 的 相对 单 
位 进行 设计 。 后 一 种 方式 设计 的 页 面 可 以 在 TEG 中 实现 文字 的 缩放 ， 而 前 者 不 可 以 。 例 如 雅虎 
英文 页 面 在 正 中 就 是 以 small 作为 基准 大 小 , 其 他 元 素 的 属性 值 单位 采用 百分比 或 em, 它们 都 
会 相对 于 这 个 基准 值 进行 变化 。 图 9-21 展示 的 是 正常 字体 大 小 时 的 页 面 ， 当 我 们 在 浏览 器 中 设 
置 文字 大 小 为 “ 较 大 ”时 ， 不 仅 文字 放大 了 ， 页 面 的 显示 区 域 也 拓宽 了 ( 见 图 9-22)。 若 查看 该 


9-21 正常 文字 大 小 的 雅虎 英文 页 
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图 9-22 将 文字 大 小 设置 为 “ 较 大 ”后 ， 文 字 放 大 ， 页 面 变 宽 


9.15 颜色 
使 用 CSS 给 文字 添加 颜色 相当 简单 , 通过 color 属性 即 可 , 颜色 值 可 以 是 CSS 的 关键 字 和 
RGB 值 。 比 如 以 下 两 条 规则 分 别 将 两 个 段落 的 文字 设 为 红色 和 白色 。 


p#pl{color:red;} 
p#p2{color:#FFF; background-color:black;} 


9.2 基本 文字 样式 


除了 前 面 介绍 的 设 定 字 体 族 和 字体 大 小 外 ，CSS 还 为 文字 样式 提供 了 如 下 几 个 属性 : 
font-style, font-weight, font-variant, text-transform 和 text-decoration. 53^, CSS 提供 了 font 
属性 ， 用 来 将 若干 文字 属性 合并 成 一 条 声明 。 


9.2.1. 斜体 和 粗 体 


页 面 中 的 一 些 重要 文字 通常 会 以 不 同 于 其 他 文本 的 样式 呈现 , 比如 COHTML 中 em 元 素 默 
认 就 把 文字 设置 为 斜体 , hl 一 类 的 标题 元 素 会 把 文字 设置 为 粗 体 , 现在 就 来 介绍 怎样 设置 斜体 
和 粗 体 。 


1. font-style 
font-style 属性 有 三 个 可 选 的 值 : normal, italic 和 oblique. italic 和 oblique 用 来 使 文字 变 成 
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斜体 。 二 者 的 效果 对 于 大 部 分 字体 来 说 是 一 样 的， 某 些 字体 显示 略 有 不 同 。oblique 属性 真正 地 
将 文字 进行 倾斜 处 理 ， 而 italic 属性 使 用 的 是 字体 中 原本 包含 的 具有 倾斜 效果 的 字体 。 但 绝 大 
多 数 开 发 者 使 用 italic 属性 设置 文字 倾斜 ， 而 oblique 几乎 无 人 问津 。 

作者 认为 斜体 效果 是 字母 形式 的 文字 的 传统 ， 中 文 是 方块 字 ， 不 适合 采用 和 斜体 效果 ， 如 果 
应 用 斜体 反而 会 增加 阅读 的 困难 程度 ， 因 此 不 建议 使 用 。 

2. font-weight 


font-weight 属性 决定 了 当前 字体 的 粗细 程度 ， 其 值 有 如 下 几 种 : 

e ”从 100 到 900， 表 示 文 字 粗 细 程度 。 

* normal 相当 于 400. 

© bold 相当 于 700. 

* lighter 和 bolder， 分 别 表示 比 父 元 素 细 或 粗 一 个 等 级 。 

实际 开发 中 一 般 只 用 normal 和 bold， 即 400 和 700 这 两 个 数值 ， 其 他 数值 的 效果 与 它们 
是 相同 的 。 你 可 以 使 用 bold 将 默认 不 加 粗 的 元 素 中 文字 加 粗 或 者 使 用 normal 将 默认 加 粗 的 元 
素 中 文字 设 为 正常 。 请 看 如 下 示例 。 

COHTML 和 CSS 代码 : 

<h1> 标 题 文 字 默 认 加 粗 </h1> 

<p> 这 段 文 字 默 认 不 加 粗 。</p> 

<hl style-"font-weight:normal; "> 标题 文字 默认 加 粗 ， 现 在 设置 为 正常 效果 。</hl> 

<p style="font-weight :bold;"> 这 段 文字 默认 不 加 粗 ， 现 在 设置 为 加 粗 效果 。</p> 


如 图 9-23 所 示 为 最 终 效果 。 
标题 文字 默认 加 粗 
这 段 文字 默认 不 加 粗 。 
标题 文字 默认 加 粗 ， 现 在 设置 为 正常 效果 。 
这 段 文字 默认 不 加 粗 ， 现 在 设置 为 加 相 效 果 。 
图 9-23 ”设置 文字 为 加 粗 或 正常 


9.2.2 大 小 写 


西 文字 符 有 大 小 写 之 分 ，CSS 也 提供 了 相应 的 属性 : font-variant 和 text-transform, 

1. font-variant 

该 属性 是 针对 西 文字 符 设计 的 ， 能 让 字符 全 部 以 大 写 或 小 写 形式 显示 ， 同 时 还 能 从 字形 大 
小 方面 对 原始 文本 的 大 小 写 形式 进行 区 分 。 属 性 值 可 为 normal 和 small-caps。 我 们 还 是 通过 示 
例 来 认识 这 个 属性 。 

代码 如 下 : 


body pt 
font-family:"Times New Roman", Times, serif; 
font-variant:small-caps; 
H 
<p>This is a DEMO for font-variant property.</p> 
从 图 9-24 可 看 出 原本 小 写 的 字符 全 部 变 成 大 写 了 ， 但 是 它们 明显 比 原始 大 写字 符 小 一 点 ， 
即 产 生 了 “小 型 号 ”大 写字 母 的 效果 。 
THIS IS A DEMO FOR FONT-VARIANT PROPERTY. 
图 9-24 使 用 font-variant 产生 小 型 号 大 写字 母 效 果 
© 注意 :， 某 些 字体 不 支持 small-caps 这 种 变 体形 式 ， 这 时 浏览 器 会 试图 通过 缩小 该 字体 大 
写 形 式 来 进行 显示 ， 但 该 方法 有 时 会 产生 异常 。 
2. text-transform 


text-transform 能 够 强制 改变 西 文字 符 的 大 小 写 形式 。 它 有 如 下 4 种 取 值 : capitalize、 
uppercase, lowercase 和 none. capitalize 使 每 个 单词 的 首 字母 大 写 ，uppercase 使 单词 中 所 有 字 
母 均 大 写 ，lowercase 使 单词 中 所 有 字母 均 小 写 。none 是 默认 值 ， 对 字符 没有 任何 影响 。 

请 看 如 下 代码 : 

pí(font-family:"Times New Roman";] 

<p style-"text-transform:none;"»This is a Demo for text-transform.«/p» 

Xp style-"text-transform:capitalize;"»This is a demo for text-transform.«/p» 


<p style-"text-transform:lowercase;"»This is a demo for text-transform.«/p» 
Xp style-"text-transform:uppercase;"»This is a demo for text-transform.«/p» 


从 图 9-25 看 出 none 对 原始 文本 没有 影响 ， 下 面 依次 把 文字 转换 为 首 字母 大 写 、 所 有 字母 
小 写 和 所 有 字母 大 写 的 样式 。 
This is a Demo for text-transform. 
This Is A Demo For Text-Transform. 
this is a demo for text-transform. 
THIS IS A DEMO FOR TEXT-TRANSFORM. 


9-25 ”应 用 text-transform 转换 文字 样式 


9.23 ”文字 装饰 


该 属性 可 给 文本 添加 上 划 线 、 下 划 线 、 删 除 线 和 闪烁 效果 ， 对 应 的 属性 值 为 overline、 
underline, line-through 和 blink。 
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如 图 9-26 所 示 为 amazon.com 显示 图 书信 息 页 面 的 一 部 分 , 可 以 看 到 链接 文字 有 下 划 线 做 
装饰 ， 图 书 原始 价格 则 用 删除 线 进行 装饰 。 
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9-26 amazon.com 页 面 使 用 了 underline 和 line-through 属性 
我 们 还 可 以 将 多 个 属性 值 写 在 一 条 规则 中 ， 例 如 : 


text-decoration:line-through underline overline; 


不 是 所 有 的 浏览 器 都 支持 blink 属性 ， 正 就 不 会 有 闪烁 的 效果 出 现 。 
9.2.4 font 属性 


font 属性 有 两 个 作用 : 第 一 ， 它 简化 了 字体 相关 样式 的 书写 ; 第 二 ， 它 允许 Web 页 面 使 用 
和 系统 设置 相关 的 字体 。 
1.font 简化 字体 相关 样式 的 书写 


到 这 里 读者 已 经 学 习 了 所 有 关于 字体 样式 的 属性 了 。 如 果 页 面 运用 了 较 多 的 样式 ， 代 码 看 
起 来 比较 繁琐 ，CSS 提供 了 font 属性 ， 作 为 一 种 缩 略 形式 ， 它 将 多 个 样式 的 属性 值 写 在 一 起 ， 
用 空格 相隔 。 font 属性 可 包含 如 下 声明 : font-style, font-variant, font-weight, font-size, line-height 
和 font-family。 

属性 出 现 要 按照 一 定 的 顺序 ， 否 则 不 会 影响 所 控制 的 元 素 。 首 先 出 现 的 应 是 font-style, 
font-variant 和 font-weight 属性 (这 三 个 属性 值 可 互 换 位 置 )， 之 后 是 font-size 和 line-height， 最 
后 是 font-family， 每 个 属性 不 必 都 出 现 。 由 于 font-size 和 line-height 的 属性 值 类 型 相同 ， 因 此 
采用 如 下 方式 进行 区 分 一 一 如 果 只 有 一 个 该 类 型 值 出 现 , 则 该 值 表示 font-size, 若 二 者 都 出 现 ， 
则 采用 如 下 方式 书写 ，font-size/line-height， 二 者 用 斜 杠 相隔 。 

请 看 如 下 示例 : 

p#pl{ 

font:oblique 16px "Times New Roman", "宋体 ", Times, serif; 
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H 
p#p2{ 
font:bold italic 1.5em/1.5 "微软 雅 黑 "， sans-serif; 
) 
p#p3{ 
font:small-caps 1.2em/30px Georgia, "Times New Roman", Times, serif; 


} 


«p id-"pl"»CSS 文字 样式 属性 众多 ， 使 用 font 属性 可 以 将 一 部 分 属性 集中 在 一 起 ， 使 代码 更 简洁 。 
</p> 
«p id-"p2"»CSS 文字 样式 属性 众多 ， 使 用 font 属性 可 以 将 一 部 分 属性 集中 在 一 起 ， 使 代码 更 简洁 。 
</p> 
<p id="p3">The font property is the shorthand property for all the other font 


properties.</p> 
如 图 9-27 所 示 为 以 上 代码 的 效果 。 


CSSX FRAMERS, font TUUS — 87 EE SE PE, 


[44171 45.2 
CSSX FERRIERE , (Eont ETNE 
m E i a A L EA 


THE FONT PROPERTY IS THE SHORTHAND PROPERTY FOR 
ALL THE OTHER FONT PROPERTIES. 


图 9-27 使 用 font 属性 将 各 个 字体 相关 属性 组 合 在 一 起 


2. 使 用 系统 字体 
font 属性 除了 可 以 包含 字体 相关 样式 属性 外 ， 还 能 让 页 面 使 用 系统 中 设 定 的 字体 样式 ， 尤 


其 是 你 要 设计 一 个 嵌入 到 程序 当中 的 Web. 页 面 时 ， 使 用 系统 字体 可 以 让 页 面 效果 与 系统 环境 
更 协调 一 致 。font 表示 系统 字体 的 属性 值 和 含义 ， 如 表 9-1 所 示 。 


表 9-1 font 表示 系统 字体 属性 值 的 含义 


font 属性 值 含义 
caption 含有 标题 属性 的 控件 上 的 字体 样式 ， 比 如 按钮 
icon 图 标 所 使 用 的 字体 样式 
menu 菜单 所 使 用 的 字体 样式 
message-box 对 话 框 所 使 用 的 字体 样式 
small-caption 标签 控件 的 字体 样式 
status-bar 窗口 状态 栏 的 字体 样式 
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9.3 段落 文字 样式 


前 面 介绍 的 样式 都 是 针对 单个 字符 的 , 而 网 站 中 文字 内 容 最 终 还 是 以 段落 的 形式 呈现 给 访 
问 者 。CSS 提供 了 丰富 的 样式 ， 可 灵活 设计 页 面 中 的 段落 。 


9.3.1 字 词 间距 


CSS 提供 了 两 个 用 来 控制 字 和 词 间距 的 属性 : letter-spacing 和 word-spacing。 由 于 中 文 段 
落 没有 词 的 区 分 ， 所 以 只 有 letter-spacing 会 对 中 文 段落 产生 效果 。 
letter-spacing 属性 用 来 更 改 单个 字符 之 间 的 距离 ， 对 中 文 也 有 效 。word-spacing 用 来 在 原 
有 基础 上 更 改 单 词 之 间 的 距离 。 这 两 个 属性 可 使 用 长 度 值 、 百 分 数 等 任何 用 于 控制 文字 大 小 的 
值 进行 赋值 ， 前 面 说 过 长 度 值 可 正 可 负 ， 负 长 度 值 就 会 在 这 里 派 上 用 场 。 
请 看 下 面 的 示例 : 
p#p2{ 
letter-spacing:0.4em; 
} 
p#p3{ 
word-spacing:0.4em; 
} 
p#p5{ 
letter-spacing:-lpx; 
word-spacing:1.2em; 


) 


«p id="pl"> 中 文 段落 没有 对 词 进行 区 分 ， 因 此 只 有 letter-spacing 样式 有 效 。</p> 
«p id="p2"> 中 文 段落 没有 对 词 进行 区 分 ， 因 此 只 有 letter-spacing 样式 有 效 。</p> 
«p id="p3"> 中 文 段落 没有 对 词 进行 区 分 ， 因 此 只 有 letter-spacing RAX. </p> 
<p id="p4">A paragraph written in English can use both of them.</p> 
<p id="p5">A paragraph written in English can use both of them.</p> 


图 9-28 为 最 终 效 果 。 


中 文 段落 没有 对 词 进行 区 分 ， 因 此 只 有 1etter-spacing 样 式 有 效 。 

中 文 段落 没有 对 词 进行 区 分 ， 因 此 只 有 1letter-spacing 样 式 有 效 。 
中 文 段落 没有 对 词 进行 区 分 ， 因 此 只 有 1etter-spacing 样 式 有 效 。 

A paragraph written in English can use both of them. 


A paragraph written in English can use both of thm 


9-28 使 用 letter-spacing 和 word-spacing 
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适当 地 增加 段落 中 文字 之 间 的 行距 会 提高 文字 阅读 的 舒适 程度 ,新浪 和 网 易 的 新 闻 正 文 的 
行距 就 被 设 定 为 23px， 比 默认 的 间距 要 大 ， 提 高 了 文字 的 可 读 性 。 通 过 line-height JE PERH 
变 行 间距 的 大 小 。 

图 9-29 展示 了 设 定 不 同行 间距 所 产生 不 同 效果 。 

行 高 1.6em， 对 于 Web 页 面 中 的 大 段 文字 内 容 ， 增 加 行 与 行 之 间 的 距离 ， 设 定 适当 的 行 


间距 可 提高 文字 的 可 读 性 。CSS 提 供 的 jine-height 属 性 可 用 来 更 改 默认 的 行 间距 ， 属 性 
可 以 是 百分比 、 长 度 值 和 数值 。 


行 高 300% 对 于 Web 页 面 中 的 大 段 文字 内 容 ， 增 加 行 与 行 之 间 的 距离 ， 设 定 适 当 的 行 
间距 可 提高 文字 的 可 读 性 。CSS 提 供 的 ine-height 属 性 可 用 来 更 改 默认 的 行 间距 ， 属 性 


可 以 是 百分比 、 长 度 值 和 数值 
Ga E E 


行 高 2， 对 于 Web 页 面 中 的 大 段 文字 内 容 ， 增 加 行 与 行 之 间 的 距离 ， 设 定 适当 的 行 间距 
可 提高 文字 的 可 读 性 。CSS 提 供 的 ine-height 属 性 可 用 来 更 改 默认 的 行 间距 ， 属 性 可 以 
是 百分比 、 长 诬 值 和 数值 。 


9-29 line-height 属性 可 更 改行 间距 


浏览 器 默认 的 行 间距 大 约 为 120%， 因 此 如 果 想 要 增加 或 减少 行 间距 都 要 以 120% 为 基准 。 
百分比 和 em 值 会 根据 文字 大 小 调整 行 间 距 ， 即 它们 之 间 的 比例 不 会 变 ， 如 果 用 px 作为 单位 ， 
间距 始终 是 固定 的 ， 不 会 因 文字 大 小 变化 而 变化 。 
line-height 属性 还 可 以 赋 给 不 包含 单位 的 数值 , 一般 情况 下 数值 1.5 相当 于 1.5em 或 150%， 
但 是 当 line-height 属性 继承 给 子 元 素 时 ， 数 值 和 其 他 类 型 就 有 区 别 了 。line-height 属性 在 默认 
情况 下 是 继承 于 父 元 素 的 ， 但 是 继承 下 来 的 是 固定 的 计算 值 。 比 如 父 元 素 字 体 大 小 是 14px， 
line-height 属性 为 1.5em， 则 继承 下 来 的 值 不 是 1.5em， 而 是 1.5x14px=21px。 因 此 不 论 子 元 素 
的 字号 为 多 少 ， 行 间距 总 固定 在 21px。 请 看 示例 : 
body{ 
font-family:"Times New Roman", "Ri"; 
font-size:l4px; 
line-height:1.5em; 
is 
p#p2{ 
font-size:30px; 
} 
p#p3{ 
font-size:l2px; 


) 
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«p id="pl">line-height 属性 在 默认 情况 下 是 继承 于 父 元 素 的 ， 但 是 继承 下 来 的 是 固定 的 计算 值 。 
比如 父 元 素 字体 大 小 是 14px, line-height 属性 为 1 .5em, 则 继承 下 来 的 值 不 是 1.5em, 而 是 1.5x 
14px = 21px. </p> 

«p id="p2"> 文 字 大 小 设 为 30px: line-height 属性 在 默认 情况 下 是 继承 于 父 元 素 的 ， 但 是 继承 下 
来 的 是 固定 的 计算 值 。 比 如 父 元 素 字 体 大 小 是 14px，1ine-height 属性 为 1 .5em， 则 继承 下 来 的 值 
不 是 1.5em, 而 是 1.5 x 14px = 21px. </p> 

<p id-"p3" > 文字 大 小 设 为 12px: line-height 属性 在 默认 情况 下 是 继承 于 父 元 素 的 ， 但 是 继承 下 
来 的 是 固定 的 计算 值 。 比 如 父 元 素 字 体 大 小 是 14px, line-height 属性 为 1.5em， 则 继承 下 来 的 值 
不 是 1.5em， 而 是 1.5 x 14px = 21px. «/p» 


效果 如 图 9-30 所 示 。 


ne-height 属 性 在 默认 情况 下 是 继承 于 父 元 素 的 ， 但 是 继承 下 来 的 是 固定 的 计算 值 . 比 
如 父 元 素 字体 大 小 是 14px，fine-height 属 性 为 1.5em， 则 继承 下 来 的 值 不 是 1.5em， 而 是 
15x 14px = 21px。 
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文字 大 小 设 为 px : line-height 属 性 在 默认 情况 下 是 继承 于 父 元 素 的 ， 但 是 继承 下 来 的 是 固定 的 计算 
值 。 比 如 父 元 素 字体 大 小 是 14px，iine-beight 尿 性 为 1 5em， 则 继承 下 来 的 值 不 是 1 3em， 而 是 1.3x 
14px= 2lpx 


9-30 line-height 继承 的 是 计算 值 


从 图 9-30 可 看 出 ， 不 论 字体 大 小 如 何 设 定 ， 继 承 下 来 的 line-height 属性 都 是 固定 的 。 如 果 
将 body 元 素 的 line-height 属性 改 为 数值 而 不 是 长 度 值 ， 那 么 每 个 元 素 在 继承 该 属性 值 时 ， 都 
要 用 这 个 值 和 本 身 的 字体 大 小 重新 进行 计算 。 我 们 将 body 的 样式 进行 如 下 更 改 : 
body{ 
font-family:"Times New Roman", "Rik"; 
font-size:l4px; 
line-height:1.5; 
) 
现在 效果 如 图 9-31 所 示 。 
可 以 看 到 子 元 素 的 行距 都 会 根据 其 文字 大 小 进行 变化 。 接 下 来 的 示例 展示 了 更 改 段落 的 行 
间距 之 后 ， 页 面 效果 得 到 改观 。 
COHTML 代码 : 
«h1»Web 页 面 中 的 文字 和 段落 </h1> 
<p> 文 字 是 向 访问 者 表达 信息 的 重要 方式 ， 文 字 和 段落 的 排版 至 关 重 要 。 对 于 大 段 文字 内 容 ， 我 们 要 选 


择 适 合 阅读 的 字体 ， 恰 当 的 颜色 ， 重 要 信息 要 用 另外 一 种 醒目 的 样式 ， 与 正文 区 分 开 ， 行 与 行 之 间 设 定 
适当 的 距离 ， 段 首 缩 进 等 。 访 问 者 即使 长 时 间 阅 读 也 不 易 产 生 视觉 疲劳 。</p> 


我 们 不 添加 任何 样式 ， 图 9-32 显示 了 浏览 器 默认 的 效果 。 


Ime-height 属 性 在 默认 情况 下 是 继承 于 父 元 素 的 ， 但 是 继 凶 下 来 的 是 固定 的 计算 值 。 比 
如 父 元 素 字 体 大 小 是 14px，fine-height 属 性 为 1. 5em， 则 继承 下 来 的 值 不 是 1.5em， 而 是 
1.5 x 14px = 21px。 


文字 大 小 设 为 30px: line-height 属 性 在 默 
认 情 况 下 是 继承 于 父 元 素 的 ， 但 是 继承 
下 来 的 是 固定 的 计算 值 。 比 如 父 元 素 字 
体 大 小 是 14px，line-height 属 性 为 
1.5em， 则 继承 下 来 的 值 不 是 1.5em， 而 
是 1.5 x 14px = 21px- 


文字 大 小 设 为 12px : fins-height 属 性 在 默认 情况 下 是 继承 于 父 元 素 的 ， 但 是 继承 下 来 的 是 固定 的 计算 
值 。 比 如 父 元 素 字 体 大 小 是 14px ,tine-height 属 性 为 1 em , 则 继承 下 来 的 值 不 是 15em ,而 是 1.5x 
14p 2ips. 


9-31 line-height 使 用 数值 型 
Web 页 面 中 的 文字 和 段落 


Ree cL eph 文字 和 段落 的 排版 至 关 重要 。 对 于 大 段 文 字 内 容 ,我 们 要 选择 适合 阅读 的 字 
体 ， 恰 当 的 颜色 , 重要 信息 要 用 另外 一 种 醒目 的 样式 ， 与 正文 区 分 开 ， 行 与 行 之 间 设 定 适 当 的 距离 ， 段 首 缩 进 等 。 访 
问 者 妈 使 长 时 间 阅 读 也 不 易 产 生 视 帝 闹 营 。 


图 9-32 段落 的 默认 效果 
现在 我 们 要 调整 字体 大 小 和 行 间距 ， 添 加 如 下 样式 : 
body{ 

font-family:"Times New Roman", "宋体 ",，Times, serif; 
} 
hl( 
font-size:18px; 
) 
pt 
font-size:l4px; 
line-height:1.6em; 
Ccolor:£343434; 
) 


最 终 效 果 如 图 9-33 所 示 。 
Web 页 面 中 的 文字 和 段落 
文字 是 向 访问 者 表达 信息 的 重要 方式 ， 文 字 和 段落 的 排版 至 关 重要 。 对 于 大 段 文字 内容， 我 们 要 选择 


适合 网 读 的 字体 ， 恰 当 的 颜色 ， 重 要 信息 要 用 另外 一 种 醒目 的 样式 ， 与 正文 区 分 开 ， 行 与 行 之 间 设 定 
适当 的 距离 ， 段 首 缩 进 等 。 访 问 者 即使 长 时 间 同 读 也 不 易 产生 视 沉 疲劳 . 


9-33 ”添加 样式 之 后 的 效果 


cM 
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9.3.8 üt 


中 文 段落 习惯 于 将 首 行进 行 缩 进 处 理 ， 一 般 要 缩 进 两 个 字符 。 使 用 text-indent 属性 就 可 以 
实现 首 行 缩 进 ， 例 如 : 
text-indent:2em; 


这 条 规则 可 将 首 行 缩 进 两 个 字符 。 如 果 使 用 px 作为 单位 则 缩 进 大 小 是 固定 的 ， 使 用 负 值 
可 达到 相反 的 效果 ,让 首 行 突出 来 。 注 意 该 属性 的 百分比 值 和 em 值 效 果 不 同 ，em 值 是 相对 于 
字体 大 小 的 ， 而 百分比 是 相对 于 包含 文字 元 素 的 父 元 素 的 宽度 。 这 里 举例 说 明 : 
body( 
font-family:"Times New Roman", "宋体 "; 
font-size:l4px; 
line-height:1.5; 


) 

pt 
margin-left:100px; 
border:lpx solid; 


} 


«p style="text-indent :2em;"> 中 文 段落 习惯 采用 缩 进 进行 排版 ， 首 行 一 般 会 缩 进 两 个 字符 ， 使 
用 text-indent 属性 可 达到 这 样 效果 。</p> 
«p style="text-indent :50%;"> 中 文 段落 习惯 采用 缩 进 进行 排版 ， 首 行 一 般 会 缩 进 两 个 字符 ,使 
用 text-indent 属性 可 达到 这 样 效果 。</p> 
«p style-"text-indent:-4em; "> 中 文 段落 习惯 采用 缩 进 进行 排版 ， 首 行 一 般 会 缩 进 两 个 字符 ， 使 
用 text-indent 属性 可 达到 这 样 效果 。</p> 


为 了 更 好 地 查看 效果 ， 我 们 给 p 元 素 增加 了 边框 ， 并 设 定 100 个 像素 的 左边 距 ， 图 9-34 
为 最 终 效果 。2em 使 首 行 缩 进 两 个 字符 ，50% 使 首 行 缩 进 宽度 为 body 元 素 宽度 的 一 半 大 小 ， 
因为 包含 p 元 素 的 父 元 素 就 是 body 元 素 了 。-4em 使 得 首 行 突出 4 个 字符 ， 也 就 相当 于 除 首 行 
以 外 的 各 行 缩 进 了 4 个 字符 。 


中 文 段落 习惯 采用 缩 进 进行 排版 ， 首 行 一 般 会 缩 进 两 个 字 
NF text-indent kE TARR ERR. 


中 文 段落 习惯 来 用 缩 
行 排版 ， 首 行 一 般 会 缩 进 两 个 字符 ， 使 用 textindent 属 性 可 
到 这 样 效果 。 


中 文 自 消 同 悍 采用 绽 进 进行 排版 ， 首 行 一 般 会 第 进 两 个 字符 ， 使 用 text- 
|aacat 属 性 可 达到 这 样 效果 。 


图 9-34 textindent 设 定 段落 首 行 缩 进 
如 果 想 对 整个 段落 进行 缩 进 ， 则 可 根据 实际 情况 设置 盒 模型 中 的 边 距 或 填充 属性 。 


9.3.4. 对 齐 方式 


1. 水 平 对 齐 

页 面 文字 大 部 分 都 是 左 对 齐 的 ， 一 些 标题 或 特殊 内 容 可 能 会 采用 居中 对 齐 或 右 对 齐 , 使 用 
text-align 可 改变 文字 的 对 齐 方 式 ， 可 取 值 为 ltf、center、right 和 justify。 它 们 的 含义 如 图 9-35 
所 示 。 


left 左 对 齐 center 居中 对 齐 right 右 对 齐 justify 两 边 对 齐 


9-35 text-align 的 各 个 属性 值 的 含义 
需要 说 明 的 是 ，justify 的 含义 虽然 是 两 边 对 齐 ， 但 是 不 影响 不 满 一 行 的 内 容 (比如 最 后 一 
行 )， 由 于 中 文字 符 都 是 等 宽 的 ， 左 对 齐 时 不 会 像 图 9-35 所 示 那 样 在 右 侧 产生 “锯齿 ”， 因 此 
left 和 justify 对 于 中 文 段落 来 说 效果 是 等 同 的 。 
2. 垂直 对 齐 
text-align 处 理 的 是 文本 的 水 平 对 齐 ， 那 CSS 能 更 改 垂 直方 向 上 的 位 置 吗 ? 答案 是 肯定 的 。 
CSS 中 的 vertical-align 属性 尽管 不 是 针对 文本 设计 的 ， 但 是 可 用 来 控制 文本 的 垂直 对 齐 方式 。 
vertical-align 属性 值 可 以 是 关键 字 、 百 分 数 和 长 度 值 ， 表 9-2 总 结 了 各 属性 值 及 其 具体 含义 。 
表 9-2 vertical-align 各 属性 值 的 含义 


属性 值 *& x 

baseline 本 元 素 基线 与 父 元 素 基线 对 齐 ， 若 本 元 素 没有 基线 ， 则 底 边 与 父 元 素 基线 对 齐 

top 本 元 素 项 端 与 父 元 素 盒 模型 项 端 对 齐 

middle 本 元 素 垂直 方向 的 中 点 与 父 元 素 的 基线 加 上 其 x 高 度 的 一 半 对 齐 

bottom 本 元 素 底 端 与 父 元 素 盒 模型 底 端 对 齐 

text-top 本 元 素 项 端 与 父 元 素 文本 顶端 对 齐 

text-bottom. 窗口 状态 栏 的 字体 样式 

super 将 文本 转 为 上 标 

sub 将 文本 转 为 下 标 

百分数 使 本 元 素 上 升 ( 正 值 ) 或 下 降 ( 负 值 )， 移 动 多 少 由 该 百分比 乘 以 line-height WAE, 
“0%” 相 当 于 baseline 

长 度 值 使 本 元 素 上 升 ( 正 值 ) 或 下 降 ( 负 值 )， 移 动 多 少 由 该 值 决定 ，“0” 相 当 于 baseline 


读者 可 能 对 top. bottom, text-top 和 text-bottom 这 几 个 值 的 含义 和 区 别 不 是 很 清楚 ， 请 看 
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下 面 的 示例 : 


pt 
background:yellow; 
vertical-align:baseline; 


font-size:1.4em; 

$ 

span{ 
font-size:0. 6em; 

} 

.largeSize{ 
font-size:2em; 

H 

.smallSize{ 
font-size:0.5em; 


) 


<p> 这 段 文字 <span class-"largeSize"»fjX«/span»«span class-"smallSize"»fj/^ 
</span>。 现 在 能 区 分 出 <span style="vertical-align:text-top;">text-top</span>、 
<span style-"vertical-align:top; "5top«/span»fü«span 
style-"vertical-align:text-bottom; »text-bottom«/span»fl«span 
style-"vertical-align:bottom; ">bottom</span> 的 区 别 了 吗 ? </p> 


首先 ， 规则 将 p 元 素 背 景 设 为 黄色 ,为 了 能 清晰 显示 出 p 元 素 盒子 的 上 下 边界 ， 将 一 些 字 
体 设 大 的 目的 在 于 让 元 素 盒子 的 边界 和 元 素 中 文本 的 边界 区 分 得 更 明显 。 从 图 9-36 很 明显 地 
看 出 含有 “text” 的 属性 值 都 是 与 文本 的 边界 对 齐 ， 否 则 是 与 元 素 边界 对 齐 的 。 


9-36 top. text-top, bottom 和 text-bottom 属性 
上 标 或 下 标 在 页 面 中 也 是 比较 常见 的 ， 比 如 ns、9%、P。 等 。 使 用 super 和 sub 这 两 个 值 就 
可 轻松 实现 ， 请 看 如 下 示例 : 
span.superScript( 
vertical-align:super; 


font-size:0.7em; 


H 

span.subScript( 
vertical-align:sub; 
font-size:0.6em; 


$ 


<p><span class="superScript">TM</span> ÆR X trademark (商标 ) 的 缩写 ， 在 国际 上 使 用 比 
较 普遍 ， 主 要 是 告诉 他 人 该 图 形 或 文字 是 作为 商标 使 用 的 ， 而 不 是 装 融 ,警示 其 他 生产 厂商 不 要 擅自 使 
用 。</p> 

«p»X«span class="subScript">1</span>+X<span 
class="subScript">2</span>+X<span class-"subScript"»3«/span»-?«/p» 


效果 如 图 9-37 所 示 。 


UNE (商标 ) 的 缩写 ， 在 国际 上 使 用 比较 普遍 ， 主 要 是 
告诉 他 人 该 图 形 或 文字 是 作为 商标 使 用 的 ， 而 不 是 装 瑛 ， 警 示 其 他 生 
RI BARERER. 
XXX? 

图 9-37 {$A vertical-align 实现 上 标 和 下 标 


在 vertical-align 属性 值 中 ， 百 分 数 和 长 度 值 的 含义 比较 明确 ， 这 里 就 不 再 举例 说 明了 。 


9.3.5 ”强制 换行 


有 时 页 面 某 些 内 容 的 宽度 需要 固定 不 变 , 浏览 器 会 在 每 一 行文 字 的 适当 位 置 产 生 换行 ， 注 
意 ， 这 种 换行 一 定 是 在 单词 与 单词 之 间 进 行 的 ， 绝 不 会 在 一 个 单词 之 内 产生 换行 。 但 是 如 果 一 
个 单词 的 长 度 已 经 超出 了 区 域 所 限定 的 范围 ， 则 浏览 器 不 会 自动 在 词 内 产生 换行 ， 于 是 单词 会 
有 一 部 分 位 于 区 域 的 外 侧 。 例 如 : 
pt 
font-family:"Times New Roman", serif; 
border:lpx dashed gray; 
width:100px; 
font-size:20px; 
) 


«p»simple«/p» 
Xp»antidisestablishmentarianismc/p» 
以 上 代码 在 IE 和 Firefox 中 效果 如 图 9-38 所 示 。 在 正中 ， 过 宽 的 单词 将 整个 p 元 素 的 区 
域 “ 撑 ”大 了 ， 而 Firefox 中 p 元 素 宽度 不 变 ， 但 是 一 部 分 单词 超出 了 所 限制 的 区 域 范围 。 
Simple 7 
antidisestablishmentarianism 


9-38 ”过 长 的 单词 破坏 了 页 面 效 果 ( 左 侧 为 IE， 右 侧 为 Firefox) 


尽管 实际 中 这 种 情况 极 少 出 现 ， 但 作为 Web 页 面 的 设计 者 ， 应 该 保证 页 面 在 各 种 极端 状 
况 下 还 能 正常 显示 。 对 于 IE 浏览 器 ， 我 们 可 以 使 用 word-break 或 者 word-wrap 属性 ， 这 两 个 
属性 都 是 CSS3 中 的 , 目前 的 Firefox2 浏 览 器 还 不 支持 它 .将 元 素 的 word-break 属性 设 为 break-all 
或 者 将 word-wrap 属性 设 为 break-word 即 可 在 IE 中 解决 此 问题 。 而 对 于 Firefox 浏览 器 则 只 能 
暂 用 overflow:hidden: 声 明 将 超出 部 分 隐藏 ， 尽 量 保证 页 面 效果 。 

现在 添加 如 下 样式 到 p 元 素 中 : 

pt 


word-wrap:break-word; 
overflow:hidden; 
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修改 后 的 效果 如 图 9-39 所 示 。 


图 9-39 修改 后 的 效果 ( 左 侧 为 上 E， 右 侧 为 Firefox) 


9.36 ”其 他 相关 属性 


还 有 一 些 属性 与 控制 段落 样式 相关 ， 这 些 属性 包括 white-space, direction. unicode-bidi . 
text-overflow 和 layout-flow 等 。 
1. white-space 
该 属性 用 来 处 理 元 素 之 内 的 空白 , 这 些 空白 可 能 是 一 个 或 多 个 空格 符 、 换 行 符 或 制 表 符 形 
成 的 。 表 9-3 总 结 了 该 属性 的 取 值 及 其 含义 。 
表 9-3 white-space 各 属性 值 的 含义 


按照 默认 方式 处 理 空白 
将 所 有 类 型 的 空白 压缩 为 一 个 空格 ， 会 根据 元 素 大 小 自动 产生 换行 ， 这 也 是 浏览 器 


默认 的 处 理 方式 

压缩 空白 为 一 个 空格 ， 不 产生 换行 ， 除 非 遇 到 br 元 素 

与 pre 效果 一 致 ， 但 会 自动 产生 换行 。IE 和 Firefox 不 支持 
压缩 空白 为 一 个 空格 ， 会 自动 产生 换行 。IE 和 Firefox 不 支持 


IE 和 Firefox 浏览 器 均 不 支持 pre-wrap 和 pre-line 属性 ， 因 此 本 节 代 码 示例 使 用 Opera 浏 
览 器 进行 展示 。 请 看 示例 : 
pt 
font-size:l4px; 
font-family:"Times New Roman", "宋体 "，serif; 
line-height:1.3em; 
width:300px; 
border:lpx solid lightgrey; 
H 


«p style-"white-space:normal;"»XXBt 文字 拥有 很 多 Z 白 ， 空 白 可 以 由 = 
或 多 个 空格 符 、 制 表 符 或 换行 符 
产生 ，white-space 属性 可 ”用 来 处 理 这 些 空白 。 
</p> 
«p style="white-space:nowrap;"> 这 段 文字 拥有 很 多 Z 白 ， 空 白 可 以 由 -—n 
或 多 个 空格 符 、 制 表 符 或 换行 符 


产生 ，white-space 属性 可 用 来 <br /> 处 理 这 些 空白 。 
</p> 
«p style="white-space:pre;"> 这 段 文字 拥有 很 多 空 A ZARUR =F 
或 多 个 空格 符 、 制 表 符 或 换行 符 
产生 ，white-space 属性 可 ”用 来 处 理 这 些 空白 。 
</p> 
«p style="white-space:pre-wrap;"> 这 段 文字 拥有 很 多 空 白 ， 空 白 可 以 由 ”一 个 
或 多 个 空格 符 、 制 表 符 或 换行 符 
产生 ，white-space 属性 可 ”用 来 处 理 这 些 空白 。 
</p> 
<p style="white-space:pre-line;"> 这 段 文字 拥有 很 多 空 白 ， 空 白 可 以 由 ”一 个 
或 多 个 空格 符 、 制 表 符 或 换行 符 
产生 ，white-space 属性 可 ”用 来 处 理 这 些 空白 。 
</p> 


图 9-40 为 Opera 浏览 器 中 的 显示 效果 。 


这 段 文字 拥有 很 多 v B. mE int 或 多 
个 空格 符 、 制 表 符 或 换行 符 产生 
space 属 性 可 用 来 处 理 RETA. 


这 段 文字 拥有 很 多 空白 ， 空 白 可 以 由 一 个 或 多 个 空格 符 、 制 表 符 或 换行 符 产 生 ，white-space 属 性 可 
用 来 处 理 这 些 空白 ， 


这 段 文字 拥有 很 多 B RULES Xp 
Et SET WO Æ% 

产生 ，white-space 属 性 可 Bats ea. 
XE 文字 拥有 很 多 空 白 , 空白 可 以 
m e 


或 多 个 SET ok B 


RES eh 空白 , 空白 可 以 由 一 个 或 多 
制 表 符 或 换行 符 产 生 ，white- 
Misco 用 来 处 理 这 些 空白 。 


9-40 white-space 各 属性 的 效果 (Opera 浏览 器 ) 

normal 情况 下 ， 所 有 空白 都 会 被 压缩 成 为 一 个 空格 ， 文 字 会 根据 元 素 大 小 自动 产生 换行 ; 
nowrap 使 得 文字 不 自动 产生 换行 ， 除非 遇 到 br 元 素 ; pre 将 保留 所 有 空白 并 按 原样 输出 到 浏览 
器 ， 与 HIML 的 pre 元 素 作用 相同 ， 另 外 文字 不 会 自动 产生 换行 ，pre-wrap 和 pre 的 区 别 在 于 
前 者 会 产生 换行 ， 而 pre-line 和 pre-wrap 的 区 别 在 于 前 者 会 压缩 空白 。 

2. direction 

direction 属性 可 控制 文本 横向 排版 方式 。ltr(left to right) 表 示 从 左 向 右 排版 ，rtl(right to left) 
表示 从 右 向 左 排版 。 注意 这 里 指 的 排版 是 对 于 块 级 元 素 说 的 ， 也 就 是 将 文本 作为 整体 进行 从 左 
向 右 或 从 右 向 左 排版 ， 文 字 内 容 的 方向 不 受 影响 。 如 果 想 实现 对 元 素 中 文字 的 控制 ， 就 要 用 到 
下 面 的 属性 。 

3. unicode-bidi 


该 属性 是 direction 的 扩展 ， 属 性 值 embed 表示 本 元 素 作为 一 个 整体 按照 direction 的 属性 


cM 


(0 mex xvROD 


— mua 
网 页 布局 开发 指南 


值 进行 排版 ，normal 表示 不 产生 新 的 整体 ，bidi-override 表示 按照 direction 的 方式 排版 文本 内 
容 。 该 属性 在 CSS 规范 中 叙述 得 比较 蜀 涩 ， 还 是 看 一 个 具体 示例 吧 : 


pt 


font-family:"Times New Roman",serif; 
font-size:1.2em; 
direction:rtl; 
background-color:lightgrey; 

) 

span( 
background-color:black; 
color:white; 


) 


<p>The unicode-bidi property allows you to change the «span»direction of 
embedded«/span» text within text of a different direction.«/p» 

<p>The unicode-bidi property allows you to change the «span 
style-"unicode-bidi:embed;"»direction of embedded«/span» text within text of 
a different direction.«/p» 

<p>The unicode-bidi property allows you to change the «span 
style-"unicode-bidi:bidi-override;"»direction of embedded«/span» text within 
text of a different direction.«/p» 


图 9-41 为 这 段 代码 的 效果 。 


Ludirection of embedd 


The unicode-bidi property allows you to change the 
„text of a different direction 


TN The unicode-bidi property allows you to change the 
„text of a different direction 
9-41 direction 和 unicode-bidi 属性 


所 有 的 p 元 素 的 direction 属性 为 rtl， 从 右 向 左 排版 。 第 一 个 p 元 素 整 体 从 右 向 左 排版 , 但 
内 部 不 受 影响 ， 文 字 均 向 右 侧 对 齐 ， 标 点 也 移 到 了 左边 。 第 二 个 p 元 素 中 的 span. 元 素 设置 
uinicode-bidi 属性 为 embed， 这 表明 span 元 素 也 要 作为 一 个 整体 按照 继承 的 direction 属性 值 进 
行 排版 ， 因 此 span 之 前 的 部 分 移 到 了 右 侧 ，span 之 后 的 内 容 移 到 了 左 侧 。 最 后 一 个 p 元 素 的 
span 的 uinicode-bidi 属性 为 bidi-override, 表明 span 内 的 文字 要 按照 其 direction 属性 进行 排版 ， 
因此 span 内 的 字符 也 都 按照 从 右 向 左 的 方式 进行 书写 。 

4. text-overflow 

尽管 这 个 属性 不 是 CSS 规范 中 定义 的 ， 尽 管 只 有 TE 浏览 器 支持 这 个 属性 ， 还 是 要 向 各 位 
读者 介绍 它 。 有 时 候 在 固定 区 域内 显示 不 下 的 文本 会 用 省 略 号 来 替代 ,一 般 是 通过 程序 判断 来 
实现 的 。 然 而 使 用 text-overflow 属性 可 直接 产生 这 种 效果 ， 减 少 了 程序 员 的 工作 量 。 

请 看 下 面 的 例子 : 


ul{ 
font-size:12px; 

} 

li{ 
width:130px; 
white-space:nowrap; 
border:lpx solid lightgrey; 


} 
lifitemB( 
overflow:hidden; 
text-overflow:ellipsis; 
B 
lifitemC( 
overflow:hidden; 
text-overflow:clip; 
ii 
«ul» 
«li id="itemA"> 即 使 超出 了 设 定 的 边界 也 依然 可 以 显示 。</1i> 
«li id="itemB"> 不 显示 超出 的 部 分 且 在 末尾 添加 省 略 号 。</1i> 
«li id="itemc"> 超 出 的 部 分 被 裁剪 掉 了 不 显示 。</1i> 
</ul> 


text-overflow 要 配合 overflow 一 起 使 用 ， 如 果 overflow 属性 值 不 为 visible, text-overflow 


的 效果 就 会 显现 出 来 。white-space 设置 为 nowrap 强制 li 中 的 文字 不 进行 换行 。text-overflow 
有 两 个 属性 值 ellipsis 和 clip， 分 别 运用 在 第 二 个 和 第 三 个 列表 中 ， 图 9-42 为 最 终 效果 。 


。 即使 超出 了 设 定 的 边界 也 依然 可 以 显示 。 
。 不 显示 超出 的 部 分 且 在 … 
。 超出 的 部 分 被 栽 前 盾 了 不 


9-42 text-overflow 属性 


5. layout-flow 


该 属性 用 来 控制 文本 的 排版 方式 ， 属 性 值 horizontal 表示 横向 从 左 至 右 排版 ， 属 性 值 


vertical-ideographic 表示 从 上 到 下 排版 ， 和 中 国 古 文 的 排版 方式 一 致 。 该 属性 只 有 TE 系列 浏览 


器 支持 。 请 看 : 


h2, pt 
width:180px; 
H 
h2( 
text-align:right; 
H 
pt 


layout-flow:vertical-ideographic; 


line-height:1.5em; 


— ua 
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<h2> 青 玉 案 sbul11; 元 夕 </h2> 


«p» 

东风 夜 放 花王 树 。 

更 吹 落 、 星 如 雨 

宝马 雕 车 香 满 路 。 

PREZ, EEN, RER. <br /> 

MULTI GEAR. 

RUBENS. 

众 里 寻 他 千百度 。 

莫 然 回首 ， 那 人 却 在 ， 灯 火 困 珊 处 。 

</p> 

图 9-43 中 的 文字 从 右 向 左 ， 从 上 到 下 进行 排版 。 
青玉 案 * 元 夕 
ETELE 
disc 
TH 
Gr ES 
jue i M 
SÉ zx 
LERERE 
:] EAEXRA $ 
HIM 
BS. 

i 


9-43 ”使 用 layout-flow 属性 进行 排版 


@ 延伸 Css3 的 文字 模块 CSS Text Level 3 中 提出 了 更 多 的 有 关 文 字 的 样式 属性 , 感 兴趣 
的 读者 可 参考 如 下 网 址 : 
http://www.w3.org/TR/css3-text/ 


9.4 文字 样式 实战 


A List Apart 是 一 家 面向 Web 设计 者 的 在 线 杂志 网 站 ， 图 9-44 为 该 网 站 的 一 则 新 闻 页 面 。 
现在 就 来 分 析 一 下 该 页 面 中 部 分 内 容 使 用 了 哪些 与 文字 相关 的 CSS 样式 。 
首先 页 面 在 body 元 素 中 设置 了 如 下 规则 : 


body { 
font: small Verdana, sans-serif; 
color: #333 


5 

字体 大 小 为 small、 字 体 族 为 Verdana 和 一 个 通用 字体 族 sans-serif， 我 们 知道 Verdana 和 
sans-serif 外 观 相 近 ， 笔 划 粗 细 均 匀 且 不 带 有 衬 线装 饰 。 颜 色 选用 了 一 种 深 灰 色 且 属于 Web 的 
安全 色 。 


ABOUT +: NEWS 。 EVENTS - SPEAKERS + SUBSCRIBE .+ CONTACT 
creaes 10, 2007 66 rived 
" eese connecting wth ite- 
Thank You minded people from 
[/ , ~ prevous | AEA News Archs mamae 
To everyone who attended An Event Apart in 2007, thank you for your energy, your Frece Meck 
md intelect, and your passion for beati standards-based web design. 
Please join us in 2008 wm 


* Now Orleans — warch or April (Gates T84) 
* Boston — May or June (dates TBA) 

* San Francisco — August 18 & 19 

* Chicago — October or November (dates TBA) 


Registration opens January 2008. 
More wil be revealed. Watch this space. A (rnt) 
Thank you- Microsoft 


mto cur speakers, for allowing us to serve as a platform for your creativity and 
leadershio in this fied. 


= to our sponsors, Adobe, Mirosořt, and Media Temple, for believing in this audience 
and helping us mount four great shows- 


mto our behind-the-scenes team, the people who keep things smooth and shiny and 
so ably sucport the goals and aspirations of An Event Apart- 


Our Thanks 


Thanks to all of you from Jefirey and Eric- Here’ s to another great vear: 


E subscribe and keep track of all the comings and goings of An Event Apart 


9-44 A List Apart 网 站 中 的 一 则 新 闻 页 面 


除了 项 部 的 导航 以 外 ， 页 面 所 有 内 容 被 放置 在 id 为 main 的 div P, i% div 包含 这 样 一 些 
规则 : 


#main ( 
font-size: 0.88em; 
line-height: 1.9; 
) 


那么 页 面 中 的 文字 大 小 的 基准 就 是 small 大 小 的 0.88 倍 ， 行 距 值 是 1.9 且 没有 单位 ， 因 此 
各 个 子 元 素 继承 下 来 的 行 间距 不 是 固定 的 计算 值 ， 而 要 用 此 值 和 自己 的 文字 大 小 进行 重新 计 
算 。 这 样 就 保证 了 子 元 素 行距 变化 是 动态 的 。 

最 上 面 的 日 期 被 放置 在 #dateline 元 素 中 ， 并 设置 如 下 样式 ; 


#dateline ( 
padding-bottom: 0.9em; 
font: 0.85em Verdana, sans-serif; 
text-transform: uppercase; 
border-bottom: #999 1px dashed; 
letter-spacing: 0.33em; 
text-align: center 

j 


规则 除了 给 div 设 定 边框 样式 、 填充 外 , 还 指定 了 字体 大 小 为 0.85em, 这 是 在 small 的 0.88 
倍 基础 之 上 再 进行 计算 的 ，text-transform 设 为 uppercase， 要 求 字 母 全 部 大 写 ， 最 后 设 定 字符 间 


a 
ES 


e. 


c 


m l 
网 页 布局 开发 指南  , 


距 并 让 文本 居中 显示 。 
新 闻 标题 被 放 在 h2 元 素 中 ， 该 元 素 中 与 文字 相关 的 样式 声明 为 : 
h2{ 
font: 1.6em Georgia, serif; 


ET h2{ 

text-align: center; 

) 

再 来 看 正文 的 第 一 个 段落 ， 段 落 被 放置 在 p 元 素 中 ， 其 中 粗 体 显示 的 部 分 被 放 在 strong 元 
素 中 ， 这 样 不 需 另 设 样式 即 可 产生 粗 体 效 果 。 字 体 大 小 和 行距 都 是 继承 父 元 素 而 得 ， 分 别 是 
0.88em 和 1.9。 字 体 大 小 就 是 small 的 0.88 倍 ， 由 于 行距 不 带 有 单位 ， 具 体 行距 值 需要 用 1.9 
FELI 0.88em 得 出 。 

图 9-45 为 上 述 部 分 在 页 面 中 的 结构 示意 图 ， 通 过 它 可 以 更 好 地 了 解 样式 信息 是 如 何 组 织 
和 运用 的 。 


div id-"main* 


div class-"column" id-"content" 


div id-"dateline" 


[ |] 
pem] 


9-45 ”页 面 结构 示意 图 


9.5 ij 结 


本 章 讲 解 了 如 何 使 用 CSS 对 字体 、 文 本 和 段落 进行 样式 控制 。 

字体 族 可 以 指定 字体 族 名 ， 最 好 在 最 后 添加 通用 字体 族 以 增强 兼容 性 。 在 Web 设计 中 字 
体 尺寸 通常 使 用 相对 大 小 进行 设置 ， 其 中 单位 px 和 em 比较 常见 。 

CSS 还 提供 了 多 种 用 于 控制 文本 和 段落 的 样式 属性 ， 它 们 可 用 来 装饰 文字 、 设 定 行 间距 、 
设置 水 平和 垂直 方向 的 对 齐 方式 、 段 落 的 排版 方式 等 。 

在 本 章 的 实例 部 分 中 ， 分 析 了 一 个 A List Apart 网 站 的 页 面 ， 看 该 页 面 是 如 何 组 织 和 运用 
与 字体 样式 、 段 落 排版 相关 的 样式 的 。 

下 一 章 将 学 习 有 关 CSS 对 页 面 链 接 进 行 样式 控制 的 内 容 。 


第 10 章 链接 处 理 


链接 是 Web 页 面 的 重要 组 成 部 分 ,没有 链接 的 页 面 也 就 几乎 失去 了 Web 页 面 存在 的 意义 。 
用 户 通 过 链接 可 访问 网 络 中 的 其 他 资源 。CSS 通过 伪 类 来 设置 不 同 状态 下 链接 的 样式 ， 本 章 将 
介绍 实现 超 链接 的 锚 元 素 及 其 不 同 状态 ， 进 而 介绍 如 何 运用 CSS 伪 类 为 链接 添加 样式 。 

本 章 主 要 内 容 
链接 和 锚 元 素 
链接 的 状态 
如 何 给 链接 添加 样式 
LVHA 规则 


10.1 认识 链接 


10.1.1. 锚 元 素 


Web 页 面 正 是 通过 链接 实现 在 不 同 页 面 之 间 跳 转 、 访 问 不 同 网 络 资源 的 目的 。(X)HTML 
提供 的 锚 (Anchon) 元 素 可 用 来 设置 超 链接 (Hyperlink)， 实 现 对 资源 的 访问 。 一 般 一 个 锚 元 素 包 
含 href 属性 ， 属 性 值 是 一 个 URL， 通 过 单 击 这 个 锚 元 素 就 可 以 访问 所 指定 的 URL. 

锚 元 素 的 标记 形式 为 <a>， 下 面 是 一 个 链接 的 示例 : 

«a href="http://www.huistd.com/"> 欢 迎 访问 工作 室 网 站 </a> 


© 注意 : a 元 素 中 不 可 以 再 包 合 其 他 的 a 元 素 . 


10.1.2 ”链接 状态 


首先 ， 浏 览 器 可 以 区 分 未 访问 过 的 和 已 经 访问 过 的 (浏览 器 的 历史 记录 会 保存 已 访问 过 的 
页 面 信息 ) 链 接 ，a 元 素 必须 包含 href 属性 以 指明 访问 的 地 址 。CSS 提供 两 个 链接 伪 类 一 一 :link 
和 :visited， 用 来 区 分 这 两 种 状态 。 下 面 的 代码 就 可 以 控制 未 访问 和 已 访问 的 链接 的 文字 颜色 ， 

a:link(color:red;] /* 未 访问 过 的 链接 文字 颜色 为 红色 */ 

a:visited(color:blue;] /* 访问 过 的 链接 文字 颜色 为 蓝 色 */ 

CSS 还 提供 了 三 个 动态 伪 类 一 一 :hover、:active 和 :focus，hover 表示 当 鼠 标 悬 停 在 链接 上 
时 的 状态 ，active 表示 当 在 链接 上 单 击 鼠标 时 的 状态 ， 即 激活 状态 ，focus 表示 链接 获得 焦点 时 
的 状态 尽管 正 中 的 链接 可 以 获得 焦点 , 但 是 它 不 支持 这 个 CSS 伪 类 ， 因 此 本 章 不 涉及 focus 
这 个 状态 。 


=} 
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(OQ 注意 : 为 了 简单 起 见 ， 本 书 使 用 伪 类 的 名 称 来 描述 对 应 的 锚 元 素 所 处 的 状态 。 例 如 
“hover 状态 ”表明 有 和 鼠标 悬 停 在 该 锚 元 素 上 。 


10.1.3. 默认 效果 


浏览 器 会 给 链接 的 不 同 状态 提供 默认 的 样式 ， 用 E 浏览 器 打开 包含 如 下 代码 的 页 面 : 


«a href="http://www.huistd.com/"> 未 访问 过 的 链接 </a><br /> 
«a href="about:blank"> 已 访问 过 的 链接 </a> 


由 于 IE 浏览 器 启动 后 默认 打开 空白 页 ， 浏览 器 的 地 址 栏 会 显示 about:blank， 因 此 使 用 
about:blank 作为 URL 可 以 表示 已 访问 过 的 链接 。 如 果 TE 不 是 以 空白 页 作为 默认 页 打开 的 ， 
读者 可 亲自 单 击 第 二 个 链接 ， 然 后 再 退回 来 ， 这 时 该 链接 就 变 成 已 访问 过 的 了 。 我 们 将 看 到 
如 图 10-1 所 示 的 效果 ， 链 接 文 字 有 下 划 线 装饰 ， 未 访问 的 链接 文字 颜色 为 蓝 色 ， 访 问 过 的 链 


接 文字 颜色 为 暗 紫红 色 。 
已 访问 过 的 链 


图 10-1 ”链接 默认 样式 : 访问 前 (上 ) 和 访问 后 (下 ) 状 态 


当 把 鼠标 放 在 链接 上 或 在 链接 上 单 击 时 ， 链 接 样 式 不 发 生 改变 ， 唯 一 变化 的 是 鼠标 的 图 标 
变 成 了 手 型 ， 如 图 10-2 Bros. 


县 全 闪 太 的 二 了 


图 10-2 ERRUER: 悬 停 ( 左 ) 和 激活 ( 右 ) 状 态 


10.2 ”添加 链接 样式 


10.2.1 LVHA， 爱 和 恨 


不 要 被 这 一 节 的 标题 吓 到 了 ， 和 暂时 不 懂 这 是 什么 意思 也 不 要 紧 ， 学 习 完 本 节 内 容 后 你 就 会 
明白 它 的 含义 。 

前 面 说 过 链接 有 4 个 状态 : link. visited, hover 和 active， 注 意 到 它们 出 现 的 顺序 了 吗 ? 
看 看 表示 4 个 状态 的 英文 单词 的 首 字母 分 别 是 什么 ? 对 了 ,就 是 LVHA， 当 我 们 给 链接 不 同 的 
状态 添加 样式 时 ， 一 定 要 按照 这 个 顺序 ， 否 则 某 些 状态 的 样式 将 不 会 生效 。 你 也 可 以 把 这 个 样 
式 顺序 记 为 爱 和 恨 (LoVe and HAte)。 

下 面 的 代码 分 别 为 链接 的 4 个 状态 设置 不 同 的 颜色 ， 注 意 它 们 的 顺序 : 


a:link (color:red;] 

a:visited [color:blue;] 

a:hover (color:yellow;] 

a:active (color:purple;] 

之 所 以 这 样 设 定 它们 的 顺序 ， 是 因为 CSS HERUR. 4 个 选择 符 都 只 包含 一 个 伪 
类 ， 因 此 它们 的 确定 度 是 一 致 的 ， 只 能 通过 出 现 顺序 来 确定 优先 级 别 。 假 如 用 户 把 鼠标 移 到 链 
接 上 ， 浏 览 器 就 会 按照 顺序 查找 第 一 个 满足 当前 状态 的 CSS 样式 ， 这 时 按钮 处 于 hover 状态 ， 
那么 最 后 出 现 的 :active 伪 类 不 起 作用 ， 而 它 之 前 的 :hover 伪 类 选择 符 将 会 匹配 当前 的 链接 ， 从 
而 达到 更 改 样式 的 目的 。 假 如 我 们 这 样 修改 上 面 规则 出 现 的 顺序 : 

a:hover {color:yellow;} 

a:link {color:red;} 

a:active {color:purple;} 

a:visited {color:blue;} 

如 果 该 链接 已 经 被 访问 过 ， 那 么 最 后 一 条 规则 的 优先 级 最 高 ， 它 总 会 匹配 当前 链接 ， 因 此 
无 论 当 鼠标 经 过 链接 还 是 单 击 链接 ， 伪 类 :hover 和 :active 中 设 定 的 样式 均 不 会 起 作用 。 所 以 一 
定 要 记 住 这 个 顺序 。 


10.2.2 下 划 线 


网 页 上 最 常见 的 链接 样式 就 是 下 划 线 了 ,这 也 是 浏览 器 默认 的 样式 ， 目 的 是 把 链接 文字 和 
普通 文字 区 分 开 来 。 有 时 候 我 们 习惯 于 将 普通 状态 链接 的 下 划 线 取消 ， 采 用 其 他 方式 区 别 于 普 
通 文字 (比如 加 粗 、 更 换 颜色 等 )， 当 鼠标 悬 停 在 上 面 时 再 显示 下 划 线 。 具 体 做 法 如 下 : 

a(color:£00FF33;]; /* 所 有 状态 的 链接 为 绿色 */ 


a:link, a:visited(text-decoration:none;) /* 去掉 下 划 线 */ 
a:hover, a:active(text-decoration:underline;) /* 添加 下 划 线 */ 


遗憾 的 是 通过 text-decoration 属性 添加 的 下 划 线 样式 稍 显 简单 ， 只 能 是 1px 大 小 的 实心 线 
条 , 那么 能 不 能 添加 其 他 样式 的 下 划 线 呢 ? 我 们 现在 就 来 介绍 另外 两 种 向 链接 文字 添加 下 划 线 
的 方法 。 

还 记得 盒 模型 的 概念 吗 ? 每 个 (X)HTML 元 素 都 可 以 抽象 为 一 个 盒子 ， 通 过 指定 盒子 的 下 
边框 样式 就 可 以 达到 添加 下 划 线 的 效果 。 请 看 下 面 的 示例 。 

COHTML 代码 : 

单 击 <a href="http://www.huistd.com/"> 这 里 </a> 访 问 工作 室 网 站 。 

CSS 代码 : 


body( 
font-size:l4px; 

} 

at 
font-weight:bold; 
text-decoration:none; 


Ba 


cM 
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a:link, a:visited( 

color:£0066FF; 

border-bottom:lpx dotted #0066FF; 
h 
a:hover( 

color:£00FFFF; 

border-bottom:lpx dotted £$00FFFF; 
) 


我 们 首先 设 定 字体 大 小 为 14px, 然后 设置 链接 文字 为 粗 体 并 且 把 下 划 线 全 部 去 掉 , 最 后 分 
别 设置 link、visited 和 hover 状态 的 颜色 和 下 边框 的 颜色 。 当 分 别 用 TE 和 Firefox 浏览 器 查看 
这 个 页 面 时 ， 会 发 现 正 中 并 没有 出 现 预 期 的 虚线 状 的 下 划 线 ( 见 图 10-3)。 


ESE LL L3 Be 
I ICE EI p 


点 击 这 里 访问 工作 室 网 站 © Deber S Cokes | | CSS | | Forms- 可 Images" @ Informetor| 


点 击 这 里 访问 工作 宝 网 站 。 


图 10-3 IE( 左 ) 没 有 下 划 线 ，Firefox( 右 ) 有 下 划 线 


Ag TAE TE 能够 显示 下 划 线 ， 我 们 需要 改变 a 元素 的 显示 方式 为 内 联 块 类 型 (inline-block)， 
这 样 “ 盒 子 ” 的 下 边框 才能 显示 出 来 ，a 元 素 的 样式 重 写 为 : 
at 
font-weight:bold; 
text-decoration:none; 
display:inline-block; 
) 


从 图 10-4 中 可 见 ， 正 显示 了 下 划 线 。 


Qss-O- xz "wet 


点 击 这 里 访问 工作 宝 网 站 ， 


z 
Wee [ [ T [ [gmeem — 


10-4 修改 后 ，IE 可 以 显示 下 划 线 


个 性 化 十 足 的 设计 师 可 能 还 对 这 个 样式 不 满意 ， 完 全 掌控 下 划 线 样式 才能 满足 他 们 的 需 
求 ， 现 在 我 们 就 来 介绍 如 何 使 用 自 定义 的 图 片 完 成 下 划 线 的 制作 。 首 先 使 用 图 形 图 像 工 具 ( 比 
如 Photoshop) 创 建 一 个 4 像素 宽 2 像素 高 的 sf 图片 ( 见 图 10-5)， 命 名 为 underline.gif。 


c 


图 10-5 自制 的 下 划 线 图 像 


COHTML 代码 不 变 ， 这 里 更 改 CSS 代码: 


bodyt 
font-size:l4px; 
) 
at 
color:£0066FF; 
font-weight:bold; 
text-decoration:none; 
background: url(images/underline.gif) repeat-x left bottom; 


) 

这 里 我 们 不 考虑 链接 的 各 个 状态 ， 让 所 有 状态 的 样式 一 致 ， 重 点 在 于 如 何 使 用 图 片 做 下 划 
线装 饰 。background 属性 为 a 元 素 添加 了 一 个 背景 图 片 underline.gif， 并 让 它 在 x 方向 上 重复 ， 
最 后 设置 对 齐 方式 为 左 对 齐 和 底 端 对 齐 。 有 关 background 属性 的 详细 用 法 会 在 下 一 章 进 行 介 
绍 。 图 10-6 为 所 取得 的 效果 。 


点 击 这 里 访问 工作 室 网 站 。 
10-6 使 用 背景 图 片 添加 下 划 线 


10.3 链接 实战 


链接 除了 以 文字 的 形式 存在 外 ， 还 可 以 经 过 修饰 ， 成 为 一 个 按钮 ， 如 果 为 链接 添加 一 些 背 
景 图 片 ， 还 可 以 达到 更 好 的 效果 。 尽 管 使 用 其 他 元 素 也 可 以 制作 按钮 ， 但 是 按钮 的 功能 实现 还 
要 依靠 添加 JavaScript 一 类 的 脚本 代码 ， 而 锚 元 素 本 身 就 包含 了 单 击 事件 ， 因 而 实现 起 来 更 加 
简单 。 这 里 将 向 读者 介绍 以 两 种 不 同 的 方式 来 创建 按钮 。 


10.3.1 简单 方式 


现在 我 们 使 用 一 种 简单 的 方式 来 创建 按钮 ， 按 钮 的 边框 用 元 素 的 边框 绘制 ， 颜 色 用 元 素 背 
景 绘制 ， 请 看 如 下 示例 。 

(X)HTML 代码 只 有 一 行 : 

<a href="http://www.huistd.com/"> 按 enbsp; 钮 </a> 
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CSS 代码 : 


at 


text-decoration:none; 
width:80px; 
height:22px; 
text-align:center; 
padding-top:7px; 
font-size:12px; 
font-weight:bold; 
display:block; 

} 

a:link, a:visited{ 
border:solid lpx $66777A; 
background-color:£$90DAE6; 


color:$09505B; 

) 

a:hover( 
background-color:£$E9FCFF; 
color:$09505B; 

} 

a:active( 
background-color:$13434B; 
color:£E9FCFF; 


) 
我 们 去 掉 a 元 素 所 有 状态 下 的 下 划 线 ， 设 置 按钮 的 宽度 和 高 度 ， 让 文字 显示 在 按钮 中 间 ， 
设 定 适当 的 上 边 距 让 文字 达到 牌 直 居中 的 效果 ， 设 置 字体 大 小 和 粗细 程度 ， 最 重要 的 是 要 把 
display 属性 设置 为 block， 这 样 高 度 和 宽度 的 设置 才 会 生效 。 
然后 定义 不 同 状态 的 样式 ， 通 过 背景 色 和 文字 颜色 来 进行 区 分 。 如 图 10-7 所 示 为 按钮 的 


三 个 状态 的 不 同样 式 。 
Ced — [0 — NIN 
普通 状态 悬 停 状态 激活 状态 


10-7 ”按钮 的 三 个 状态 


10.3.2 图 像 方式 


图 10-8 为 网 易 邮 箱 界 面 的 一 部 分 ， 其 中 收 信和 写 信 按 钮 就 是 使 用 锚 元 素 加 图 片 制作 的 。 
当 鼠 标 悬 停 在 上 面 时 ， 按 钮 会 更 换 图 片 以 另外 一 种 样式 展现 出 来 ， 但 是 这 样 的 方法 也 有 个 小 小 
的 缺陷 ， 那 就 是 当 单 击 鼠标 时 ， 锚 元 素 获 得 焦点 后 会 有 个 点 状 的 线 框 出 现 。 


163325... 


图 10-8 163 邮箱 页 面 


下 面 我 们 就 来 制作 类 似 这 种 效果 的 按钮 ， 首 先 用 图 像 软件 制作 好 表示 3 个 状态 的 图 片 (我 
们 让 visited 和 link 的 状态 一 致 ), 把 3 幅 图 保存 为 一 张 PNG 格式 的 图 片 bgeButton.png, 如 图 10-9 
所 示 。 


10-9 表示 3 种 状态 的 按钮 图 片 ， 由 上 到 下 依次 是 link, hover 和 active 
(X)HTML 代码 相当 简单 ， 仍 然 只 有 一 行 : 


<a class-"imageButton" id-"buttonA" href="http://www.huistd.com"><span> 按 
&nbsp; fll«/span»«/a» 


CSS 代码 如 下 : 


a.imageButton( 
text-decoration:none; 
width:100px; 
height:40px; 
display:block; 
} 
a.imageButton span( 
font-weight:bold; 
visibility:hidden; 
H 
asbuttonA:link, afsbuttonA:visited( 
background:url(images/bgButton.png) no-repeat 0 0; 
} 
a#buttonA:hover{ 
background:url(images/bgButton.png) no-repeat 0 -40px; 
} 
a#buttonA:active{ 
background:url(images/bgButton.png) no-repeat 0 -80px; 
H 


€, , 


R 
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图 10-10 为 最 终 效 果 ， 当 鼠标 悬 停 在 按钮 上 或 单 击 按钮 时 ， 按 钮 会 以 不 同 的 样式 呈现 。 注 
意 到 我 们 给 a 元 素 指定 了 一 个 class 名 和 一 个 id 名 ,class 名 表明 该 a 元 素 是 用 来 做 图 片 按钮 的 ， 
因此 该 类 的 样式 去 掉 了 下 划 线 , 并 设置 了 高 度 和 宽度 , 不 要 忘记 把 a 元 素 改 成 块 (block) 级 别 的 。 
接 下 来 的 CSS 代码 可 能 会 让 读者 产生 疑问 ， 为 什么 写 个 span 元 素 却 还 要 设置 其 visibility 属性 
为 hidden, 把 它 隐藏 掉 呢 ? 写 这 个 span 元 素 的 目的 在 于 使 (X)HTML 代码 本 身 包含 按钮 的 信息 ， 
有 了 这 个 信息 ， 搜 索引 擎 才 可 能 搜索 到 这 个 关键 字 。 如 果 用 户 的 浏览 器 不 支持 CSS， 那 么 这 个 
链接 将 会 以 纯 文本 的 方式 显示 ， 不 会 对 访问 产生 影响 。 最 后 ， 通 过 id 和 伪 类 选择 符 ， 我 们 分 
别 让 背景 图 在 a 元 素 的 三 个 状态 下 进行 位 置 变换 (有 关 背 景 图 像 属 性 的 用 法 请 参考 第 11 章 ), 从 
而 产生 了 如 图 10-10 所 示 的 效果 。 


TETTE. 


普通 状态 BERE 激活 状态 


10-10 使 用 a 元 素 制 作 按钮 
图 10-11 展示 了 变换 背景 图 位 置 的 原理 。 


80px 
40px 
X 
g xu |" [mau m 


竖 直 方向 的 偏 移 值 : 
Opx -40px -80px 


10-11 背景 图 位 置 变换 的 原理 


这 样 ， 一 个 完全 由 CSS 制作 的 按钮 就 完成 了 ， 不 用 添加 任何 脚本 代码 就 能 实现 按钮 的 基 
本 功能 。 本 例 中 将 class 和 id 分 开 的 好 处 可 能 不 是 很 明显 , 假如 页 面 有 很 多 大 小 一 致 图 片 按钮 ， 
通过 类 选择 符 就 可 以 一 次 设置 好 所 有 a 元 素 的 大 小 和 显示 方式 , 然后 再 通过 id 选择 符 分 别 为 每 
个 的 按钮 添加 不 同 的 图 片 。 

功能 性 的 按钮 通常 没有 必要 区 分 访问 和 未 访问 这 两 个 状态 , 因为 用 户 要 经 常 使 用 按钮 提供 
的 功能 , 而 不 关心 这 个 链接 是 否 已 经 访问 过 , 因此 本 小 节 示例 中 全 部 让 这 两 个 状态 的 样式 一 致 。 


c 


[à ER: 我 们 将 表示 按钮 三 种 不 同 状态 的 图 像 放 置 在 一 张 图 像 上 , 通过 位 置 变换 获取 相应 
的 图 像 。 这 样 做 能 有 效 地 减少 浏览 器 对 Web 服务 器 的 资源 请 求 ， 从 而 加 快 页 面 
的 下 载 速度 。 


前 面 介绍 过 的 两 种 制作 按钮 的 方法 有 个 缺陷 ， 按 钮 的 尺寸 由 CSS 规定 死 了 ， 不 能 按照 按 
钮 上 的 文字 个 数 灵 活 变 化 宽度 ， 如 果 按 钮 字数 过 多 还 会 出 现 显示 不 下 的 情况 。 为 了 解决 这 个 问 
题 ， 我 们 不 能 使 用 尺寸 固定 的 图 片 作为 背景 ， 而 是 使 用 可 以 重复 出 现 的 ( 见 图 10-12)， 命 名 为 
bgButtonEx.png. 


EER 


Bg 


取 一 个 像素 宽度 的 图 像 


10-12 ”重新 制作 背景 图 片 


按钮 左边 的 小 图 标 也 要 单独 提取 出 来 ， 取 名 为 dec.gif。 为 了 能 融合 在 不 同 的 背景 中 ， 图 像 
需要 做 透明 处 理 ( 见 图 10-13， 灰 白 格 表示 图 像 的 透明 部 分 )。 


图 10-13 提取 按钮 上 的 图 片 ， 并 让 背景 透明 


前 期 工作 已 经 完成 ， 该 到 写 代 码 的 时 候 了 ，(X)HTML 代码 保持 不 动 ， 为 了 展示 按钮 的 自 
动 伸缩 功能 ， 我 们 再 添加 一 个 新 按钮 ， 并 指定 id 值 为 buttonB: 

<a class="imageButton" id="buttonA" href="http://www.huistd.com"><span> 按 

&nbsp; 钮 </span></a> 

«a class-"imageButton" id-"buttonB" href="http://www.huistd.com"><span> 四 

&nbsp; 字 &nbsp; 按 gnbsp; 钮 </span></a> 


现在 重 写 CSS 样式 代码 ， 为 了 使 读者 能 进一步 掌握 CSS 编写 技巧 ， 这 里 将 分 步 进 行 。 

首先 , 将 设 定 宽度 的 代码 取消 ， 并 设置 文字 大 小 为 12px， 将 颜色 设置 成 原 图 像 中 的 文字 颜 
色 。 接 着 让 span 元 素 显 示 出 来 ， 取 消 原来 的 visibility:hidden 声明 。 最 后 更 改 按 钮 各 个 状态 的 
背景 图 为 bgButtonEx.png， 并 让 它 在 水 平方 向 上 重复 出 现 。 


eE 
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代码 如 下 : 
a.imageButton{ 
text-decoration:none; 
height:40px; 
display:block; 
font-size:12px; 
color:#315664; 
} 
a.imageButton span{ 
font-weight :bold; 
} 
a#buttonA:link, a#buttonA:visited, a#buttonB:link, a#buttonB:visited{ 
background:url(images/bgButtonEx.png) repeat-x 0 0; 
} 
a#buttonA:hover, a#buttonB:hover{ 
background:url(images/bgButtonEx.png) repeat-x 0 -40px; 
} 
a#buttonA:active, a#buttonB:active{ 
background:url(images/bgButtonEx.png) repeat-x 0 -80px; 
} 


图 10-14 为 修改 后 的 效果 。 
EH 


CEZ ——— 


图 10-14 ”修改 代码 之 后 的 按钮 
从 图 10-14 看 出 ， 按 钮 的 宽度 是 随 着 浏览 器 宽度 变化 的 而 不 是 根据 文字 宽度 变化 ， 这 是 块 
级 元 素 的 特性 ， 它 会 占 满 一 整 行 。 另 外 按钮 中 的 文字 位 置 也 不 合适 。 为 了 解决 这 两 个 问题 ， 我 
们 再 向 aimageButton 中 添加 如 下 两 条 规则 ， 并 修改 height 属性 值 : 


height:25px; 
float:left; 
padding:l5px 20px 0 20px; 


图 10-15 为 添加 规则 后 的 效果 。 


按钮 四 宇 按钮 


图 10-15 ”添加 规则 后 效果 
于 让 元 素 向 左 浮动 ， 按 钮 不 会 再 占 满 一 整 行 ， 按钮 宽度 可 以 根据 文字 多 少 而 变化 了 。 添 
加 的 padding 属性 使 得 按钮 中 的 文字 与 边框 之 间 形 成 一 定 距离 ， 由 于 上 边 距 会 影响 整个 高 度 ， 
因此 将 height 值 改 为 25px(40-15=25)。 现在 按钮 两 边 还 缺少 边框 ， 小 图 标 也 没有 添加 ， 于 是 我 


们 再 次 添加 新 规则 ， 整 体 代码 应 为 : 


a.imageButton{ 
text-decoration:none; 
height:25px; 
padding:15px 20px 0 12px; 
display:block; 
float:left; 
font-size:12px; 
color:#315664; 
border-left:lpx solid #7A9C9C; 
border-right:lpx solid #7A9C9C; 
) 
a.imageButton span( 
font-weight:bold; 
background:url(images/dec.gif) no-repeat 2px 0px; 
padding-top:lpx; 
padding-left:30px; 
) 
atsbuttonA:link, afbuttonA:visited, asbuttonB:link, afsbuttonB:visited( 
background:url(images/bgButtonEx.png) repeat-x 0 0; 
$ 
a#buttonA:hover, a#buttonB:hover{ 
background:url(images/bgButtonEx.png) repeat-x 0 -40px; 
) 
afbuttonA:active, afdbuttonB:active( 
background:url(images/bgButtonEx.png) repeat-x 0 -80px; 
} 


图 10-16 为 最 终 效果 ， 一 个 宽度 自 适应 的 按钮 就 做 好 了 。 读 者 是 不 是 已 经 领略 到 CSS 的 魅 


力 了 ? 我 们 没有 修改 任何 (X)HTML 代码 , 而 只 调整 了 样式 就 能 达到 新 的 效果 , 是 不 是 很 神奇 ? 


su 
图 10-16 宽度 自 适应 按钮 的 最 终 效果 
104 小 结 


本 章 讲 述 了 如 何 给 Web 页 面 中 链接 添加 样式 以 及 利用 锚 元 素 固 有 的 特性 来 实现 按钮 。 
COHTML 文档 使 用 锚 元 素 表示 链接 ， 链 接 分 为 5 个 状态 : 正常 、 已 访问 、 悬 停 、 激 活 和 获 


得 焦点 。 CSS 提供 了 5 种 伪 类 , 分 别 对 应 不 同 状态 的 锚 元 素 , 它们 是 :link、 :visited、 hover, active 
和 :focus。 由 于 正 浏览 器 不 支持 :focus 这 个 伪 类 ， 因 此 实际 只 使 用 前 4 个 伪 类 。 


对 应 不 同 状态 的 CSS 规则 要 满足 一 定 的 顺序 ， 顺 序 是 由 CSS 层 又 规则 决定 的 ， 否 则 一 些 


e5] 
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状态 的 样式 会 与 代码 不 符 。 这 个 顺序 就 是 :link、:visited、:hover、:active， 将 它们 的 首 字母 提出 
来 缩写 成 LVHA 会 更 便于 记忆 。 

于 锚 元 素 本 身 包含 了 多 种 状态 ， 也 能 自动 地 响应 鼠标 单 击 ， 因 此 用 它 来 实现 按钮 是 个 不 
错 的 主意 。 只 要 添加 少量 的 样式 代码 ， 再 设置 背景 色 或 添加 一 些 背景 图 片 ， 按 钮 就 可 以 轻松 地 
实现 了 。 

链接 还 常 与 列表 元 素 结合 在 一 起 使 用 ， 这 是 构建 网 站 导航 的 主要 方式 之 一 ， 有 关 导 航 菜单 
的 设计 和 制作 问题 将 会 在 第 12 章 中 讲解 。 
下 一 章 将 介绍 图 像 和 背景 的 相关 知识 。 


$115 ”图像 和 背景 


很 难 想象 缺少 图 像 的 网 站 会 是 什么 样子 。 与 文字 内 容 相 比 ， 图 像 提供 的 信息 更 直观 ， 而 且 
一 些 网 站 就 是 依靠 优秀 的 图 形 图 像 设计 创造 出 非凡 的 视觉 效果 的 ， 令 访问 者 过 目 难 忘 。 网 页 中 
常见 的 图 像 使 用 方式 有 页 面 背景 图 、 网 站 标志 、 网 页 插图 和 一 些 起 装饰 作用 的 小 图 标 等 。 
CSS 不 仅 提供 了 控制 图 像 的 样式 属性 ， 还 支持 在 样式 代码 中 插入 和 调整 图 像 。 本 章 将 会 介 
绍 如 何 利用 CSS 的 相关 样式 属性 对 图 像 进行 处 理 ， 此 外 ， 还 会 介绍 一 些 图 像 的 基本 知识 以 及 
如 何 制作 适合 Web 环境 的 图 像 。 
本 章 主要 内 容 
Web 中 常见 的 图 像 格式 
img 元 素 的 使 用 
图 文 混 排 技术 
背景 属性 和 背景 图 像 的 使 用 


11.1 图 像 格 式 


GIF, JPEG 和 PNG 是 Web 页 面 最 常 使 用 的 三 种 图 像 格式 ， 它 们 拥有 不 同 的 特性 和 适用 范 
目 。 本 节 将 介绍 有 关 三 种 图 像 格 式 的 基本 知识 ， 帮 助 设 计 者 根据 需要 选择 合适 的 图 像 格 式 。 有 
关 图 像 文件 的 具体 格式 、 存 储 结构 和 压缩 算法 等 内 容 将 不 做 介绍 。 


11.1.1 GIF 


GIF, 3 X 4-179 Graphic Interchange Format， 即 可 交换 图 像 格 式 ，1987 年 由 CompuServe 
公司 提出 并 开发 ， 是 早期 Web 浏览 器 所 显示 的 第 一 种 图 像 格式 。 目 前 Web 页 面 上 仍然 大 量 地 
使 用 着 GIF 图 像 。 

GIF 采用 索引 色 表 来 存储 图 像 的 颜色 信息 ， 最 大 可 包含 8 位 的 颜色 信息 ， 即 256 种 颜色 

(28=-256)。 位 数 越 少 则 图 像 的 颜色 也 越 少 ， 文 件 体积 也 较 少 。 简 单 地 讲 ，GIF 并 不 单独 存储 图 
像 中 每 个 像素 的 颜色 值 ， 而 是 把 图 像 的 所 有 颜色 组 织 成 一 个 颜色 表 ， 每 个 像素 只 包含 对 这 个 颜 
色 表 的 引用 ， 既 使 图 像 分 辨 率 很 大 ， 由 于 颜色 数 固定 ， 只 多 添加 了 一 些 像素 的 引用 ， 文 件 尺 十 
也 不 会 很 大 。 如 图 11-1 所 示 为 两 幅 拥有 不 同 颜色 数量 的 GIF 图 片 ， 可 以 看 出 当 颜 色 数量 较 少 
时 ， 画 面 比较 粗糙 ， 呈 现 出 一 种 颗粒 状 。 
GIF 支持 透明 显示 ， 透 明 程 度 只 有 两 个 级 别 ， 即 透明 和 不 透明 ， 没 有 任何 半 透 明 的 效果 。 
透明 区 域 下 面 的 任何 东西 (通常 是 页 面 背 景色 或 其 他 图 像 ) 都 可 以 显示 出 来 。 几 乎 所 有 的 浏览 器 
都 支持 GIF 透明 效果 。 另 外 ， 一 张 GIF 图 片 可 以 包含 多 个 帧 ， 它 们 连续 显示 形成 动画 ， 多 数 浏 
览 器 也 支持 GIF 动画 。 
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256 色 94.0KB 
11-1 不 用 颜色 数量 的 GIF 图 像 


通常 , 色彩 数量 较 少 、 需 要 透明 处 理 或 以 动画 显示 的 图 像 使 用 GIF 格式 保存 ， 比 如 页 面 背 
景 图 案 ， 企 业 的 标识 ， 一 些 广告 动画 等 。 


11:4:2- JPEG 


JPEG 是 Joint Photographic Experts Group 的 缩写 , 译 为 联合 图 像 专家 组 。JPEG 格式 的 图 像 
文件 通常 以 jpeg 或 jpg 作为 后 级 ， 因 而 也 有 人 称 之 为 JPG 图 像 。 

JPEG 包含 24 位 RGB 颜色 信息 ， 比 GIF 支持 更 多 的 色彩 数量 ， 能 表现 更 丰富 的 色彩 变化 
和 图 像 细 节 ， 与 GIF 不 同 之 处 在 于 JPEG 不 使 用 颜色 表 存储 色彩 信息 。JPEG 使 用 了 一 种 有 损 
耗 的 压缩 算法 ， 图 像 信息 会 因此 而 产生 丢失 ， 如 果 压 缩 比 率 不 是 很 高 的 话 ， 肉 眼 是 无 法 分 辨 损 
耗 的 。 在 使 用 图 像 处 理 软 件 保存 JPEG 格式 时 会 选择 压缩 质量 ， 通 常 是 0~100(Photoshop 提供 
的 范围 是 0~12)。 数 值 越 低 则 图 像 质 量 也 越 低 ， 但 是 文件 体积 较 小 。 图 11-2 展示 了 两 幅 质量 不 
同 的 JPEG 图 像 。 


较 高 品质 172KB 较 低 品质 36.4KB 


11-2 不 同 压缩 质量 的 JPEG 图 像 
于 JPEG 可 以 保存 24 位 的 颜色 信息 ， 那 些 色彩 丰富 的 图 像 可 考虑 使 用 该 格式 保存 ， 比 
如 入 物 肖 像 、 产 品 展示 、 风 景 绘画 等 。JPEG 对 于 颜色 数量 较 少 的 图 像 压 缩 效果 并 不 好 ， 会 让 
颜色 “ 变 脏 ”。 


c 


11.1.3 PNG 


PNG, 4f Portable Network Graphics， 即 可 移植 网 络 图 像 。PNG 是 专门 针对 Web 使 用 而 
设计 的 ， 它 支持 8 位 调 色 板 (与 GIF 类 似 )， 支 持 16 位 灰 度 和 48 位 真 彩色 。 采 用 无 损耗 压缩 策 
略 ， 可 包含 8 位 或 者 16 位 透明 信息 的 alpha 通道 ， 这 就 是 说 比 起 GIF 只 有 透明 和 不 透明 两 种 
效果 ，PNG 可 以 支持 多 至 65000 个 不 同 程度 的 透明 ， 但 256 个 透明 程度 的 更 为 常见 。 图 11-3 
对 比 了 含有 透明 信息 的 GIF 与 PNG 图 像 的 区 别 。 目 前 ，PNG 已 经 成 为 W3C 的 推荐 标准 
(http://www.w3.org/Graphics/PNG/). 


Bi 11-3 GIF( 左 ) 与 PNG( 右 ) 图 像 的 透 阴 效果 对 比 ， 灰 白 格 表示 图 像 透 阴部 分 
尽管 PNG 有 上 述 这 些 优秀 的 特性 ， 但 它 并 没有 得 到 广泛 的 支持 ， 当 作为 img 元 素 插 入 到 
网 页 中 时 ，IE6 根本 无 法 正确 显示 透明 效果 ， 好 在 这 一 问题 已 在 TET 中 得 到 修正 ( 见 图 11-4)。 
但 Windows 平台 的 正 浏览 器 至 今 仍然 无 法 显示 CSS 中 设 定 的 带 有 透明 信息 的 PNG 图 像 。 


11-4 —K PNG 图 像 放置 在 黄色 背景 上 (IE6( 左 ) 将 透明 部 分 显示 为 灰色 ，IE7( 右 ) 可 以 正常 显示 透明 效果 ) 
11.2 ”给 图 像 添加 样式 


本 节 所 涉及 的 图 像 是 指 通 过 <img> 标 记 插入 的 , 作为 (X)HTML 文档 的 一 部 分 。CSS 并 没有 
专门 的 样式 来 控制 图 像 显 示 ， 你 可 以 使 用 已 经 学 过 的 部 分 样式 属性 来 添加 效果 ， 其 中 与 盒 模型 
相关 的 样式 属性 经 常会 被 使 用 。 在 介绍 添加 样式 之 前 ， 我 们 先 来 熟悉 一 下 img 元 素 。 


eR 


y 
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11.2.1 img 元 素 


img 元 素 可 以 将 外 部 的 图 像 资源 插入 到 Web 文档 中 ， 属 于 内 联 元 素 ， 不 会 引起 任何 换行 ， 
也 不 会 产生 多 余 的 空白 ， 图 像 底 边 与 周围 的 文字 的 基线 位 置 对 齐 。 比 如 下 面 的 代码 会 产生 如 图 
11-5 所 示 的 效果 : 

<p> 安 装 Firebug 后 ， 浏 览 器 的 导航 工具 条 中 会 多 一 个 <img src="images/firebug logo.gif" 

alt-"Firebug logo”/> 图 标 ， 点 击 它 就 可 以 启动 Firebug 了 。</p> 

<p>After installing Firebug there is an icon «img src-"images/firebug logo.gif" 

alt-"Firebug logo" /» appeared in the navigation toolbar. Clicking this icon 


will launch the Firebug.«/p» 


安装 Firebug 后 ， 浏览 器 的 导航 工具 条 中 会 2 一个 [ 图 标 ， 点 击 它 就 可 
以 启动 Frebug 了 。 


After installing Firebug there is an icon * appeared in the navigation toolbar. 
Clicking this icon will launch the Firebug. 


11-5 ”插入 图 像 后 的 默认 样式 


© 注意 : 插入 的 图 像 是 与 西 文字 符 的 基线 对 齐 的 ， 基 线 位 置 比 中 文字 符 的 底 边 略 高 一 些 ， 
这 也 是 图 11-5 中 图 像 底 边 会 比 周围 的 中 文字 符 底 边 高 一 点 儿 的 原因 。 另 外 ， 
XHTML 要 求 img 元 素 必须 要 有 alt 属性 ， 以 便 在 图 像 加 载 完成 之 前 或 者 加 载 失 
败 时 能 够 以 文字 的 形式 向 用 户 提示 图 像 的 内 容 或 作用 。 


当 图 片 被 放置 在 链接 中 时 ， 浏 览 器 会 在 图 像 周 围 显示 一 个 2px 宽 的 蓝 色 边框 ， 这 个 蓝 色 就 
是 链接 文字 默认 的 颜色 。 大 部 分 情况 下 设计 者 都 会 将 蓝 色 边框 去 掉 ,你 可 以 将 img 元 素 的 border 
属性 置 为 0 或 者 修改 CSS 的 border 属性 。 

img 元 素 中 包含 了 一 些 控制 图 像 位 置 和 样式 的 属性 ， 比 如 align、valign、hspace 和 vspace 
等 ， 本 书 将 不 使 用 这 些 属 性 ， 把 控制 样式 的 任务 全 部 交 给 CSS 来 完成 ，(X)HTML 只 负责 内 容 
的 安排 ， 达 到 各 尽 其 职 的 目的 。 


11.2.2 盒 模型 相关 样式 


与 盒 模型 相关 的 几 个 样式 属性 都 可 以 用 到 图 像 上 。 比 如 ,用 border 去 掉 链 接 图 像 默 认 的 蓝 
色 边 框 或 者 添加 自 定义 的 边框 ， 用 padding 添加 边框 与 图 像 之 间 的 空白 ,用 margin 添加 图 像 与 
其 他 元 素 之 间 的 距离 。 图 11-6 展示 了 对 图 像 添加 不 同样 式 声明 的 效果 。 


border:3px dashed red; 
padding:3px; 


border:6px double red; border:10px ridge red; 
padding:0.3em; padding:196; 


1-6 盒 模型 相关 样式 的 运用 


11.23 图 文 混 排 


在 段落 中 添加 图 片 会 去 除 页 面 的 单调 感 ， 让 页 面 元 素 更 丰富 、 更 具 吸 引力 。 有 时 一 条 链接 
文字 之 前 也 会 添加 一 些 修饰 性 的 图 片 ， 以 突出 细节 。 若 想 让 图 片 和 文字 能 更 好 地 融合 在 一 起 ， 
添加 适当 的 样式 信息 是 很 有 必要 的 。 图 11-7 展示 了 一 个 图 文 混 排 的 实例 ， 可 以 看 到 图 片 像 是 
区 在 了 文字 中 ， 文 字 环 绕 在 图 片 的 周围 。 

有 一 家 新 开张 的 咖啡 店 想 通 过 互联 网 宣传 自己 的 品牌 ,并 想 在 网 站 上 介绍 一 些 关 于 咖啡 的 
知识 ， 如 果 页 面 通 篇 全 是 文字 ， 届 怕 浏览 者 不 会 对 生 太 大 兴趣 。 如 果 能 添加 一 些 与 咖啡 相 
关 的 图 片 则 会 吸引 更 多 的 访问 者 。 文 字 和 图 片 材料 已 经 准备 好 了 ，(X)HTML 代码 如 下 : 

<div id="content"> 

<h1> 咖 啡 的 历史 </h1> 

<p> 

<img src-"images/coffeel.jpg" alt-"coffee bean" width-"200" height-"145" /> 
咖啡 起 源 于 非洲 东部 ， 这 个 地 方 就 是 现在 的 埃塞俄比亚 咖 法 (Kaffa) 省 ，“ 咖 啡 (coffee) ”一 词 

就 是 源 自 于 省 名 “ 咖 法 (Kaffa) ”。 传说 有 一 个 名 叫 Kaldi 的 放羊 的 牧民 发 现 ， 他 的 羊 在 吃 了 某 种 植 

物 的 果实 后 表现 得 异常 活泼 。Kaldi 很 好 奇 ， 于 是 亲自 食用 了 这 种 果实 。 他 发 现 这 种 果实 能 帮助 恢复 精 

力 ， 这 个 消息 马上 就 在 当地 传 开 了 。 一 些 僧侣 在 得 知 这 种 神奇 的 果实 后 ， 将 它们 凉 干 ， 带 回 到 遥远 的 修 

道 院 。 他 们 将 果实 泡 在 水 中 饮用 ， 用 来 使 自己 保持 清醒 。</p> 

<p> 咖 啡 果实 从 埃塞俄比亚 传 到 了 阿拉 伯 半 岛 ， 并 在 那里 被 种 植 。 接 着 咖啡 传 到 了 士 耳 其 ， 那 里 首 

次 出 现 用 火 烘 烤 出 来 的 咖啡 豆 。 人 们 将 烤 好 的 咖啡 豆 碾 碎 ， 形 成 了 今天 咖啡 的 雏形 。</p> 

«p» 
«img src-"images/coffee2.jpg" alt-"coffee cup" width-"170" height-"208" /» 
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威尼斯 商人 将 咖啡 待 到 了 欧洲 大 陆 。 在 欧洲 ， 这 种 新 型 的 饮料 却 遭 到 天 主教 堂 严 厉 批 评 ， 许 多 人 认 
为 教皇 会 对 咖啡 下 禁令 ， 并 称 其 为 邪恶 的 饮料 。 令 人 们 惊讶 的 是 ， 教 皇 本 人 也 是 咖啡 饮用 者 ， 并 宣称 为 


真正 的 基督 教 饮 料 。</p> 


<p> 在 18 世纪 ， 一 个 法 国 步兵 团 上 尉 在 横 跨 大 西洋 的 途中 种 植 了 一 株 小 咖啡 树 。 这 株 咖啡 树 被 移 
植 到 了 加 勒 比 海 的 马 提 尼克 岛 ， 在 随后 50 年 里 在 该 岛 繁衍 出 一 千 九 百 万 株 以 上 咖啡 树 。 虽 然 起 步 艰难 ， 


但 咖啡 种 植 正 是 借 此 机 会 传 遍 了 中 南美 洲 的 热带 地 区 。</p> 


<p><img src-"images/coffee3.jpg" alt-"coffee" width-"190" height-"135" /> 
SR WOREROU AERIAL, AANEAGAPST EU. VH. ZuM. SELLE. BZR REER 
根 等 品牌 的 咖啡 早已 尽 人 皆 知 。 这 种 商品 在 以 美元 为 单位 的 全 球 贸易 中 仅 次 于 石油 居 第 二 位 。 咖 啡 是 世 
界 上 最 流行 的 饮料 ， 每 年 消耗 4000 亿 杯 。 可 以 想象 出 ， 仅 仅 在 巴西 ， 就 有 五 百 多 万 人 从 事 种 植 和 收获 ， 


而 咖啡 树 的 数量 达到 30 亿 棵 之 巨 。 
«/p» 
</div> 
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That Stylish 20th Century!: Part 1 
By Blair Sanderson 


You may have paid your taxes 
this spring, but have you 
reckoned adequately with. 
style in 20th Century music? 
AMG's Blair Sanderson thinks 


not! in the first installment of 
à multi-part series, Blair 
argues that to better understand anc appreciate 
the music of the last century one should turn to 
style, rather than technique or philosophy, for 
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Wu-Tang Clan - 8 Diagrams 
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With anticipation so high it 
caused debate not only among 


tho group itself, 
Wu-Tang Clans 
record, § Diagr 


anncuncement of the successful 
obtainment of the Beatler While 
My Guitar Gently Weeps" sample 


played by Chil Peppers guitarist John Frusci 
George Harrison's son, a Wu enthusiast hinseli, Dhani). Then Raekwon 
did a highly publicized online interdew in which he accused the RZA 
of taking a dictatorial stance regarding the shape of the album, calling 
him 2 "hip-hop hippie" who was moving the Clan in the wrong 
direction. Then Ghostface Killah followed suit. also protesting the 


timing of the release (it had been set for December 4th, the same day 
The Big Doe Rehab was to come out, but was then pushed backa. 
week). Finally, RZA responded, diplonatically, respecting the opinions 
of the dissenting MCs but standing by his own work. 
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December 4th, 2007 | 4:05 pm | AMG Staff 


Everyone knows the feeling of the crush. The 
0 sweaty palms, the shortness of breath, the 
' pressing need to tell everyone you know about 
the cbject of your crushed out mania. Some of 
live for that fooling and 2007 didn't 
Join us for a quick and breathless 
dash through a list of some of those bands and artists that made our 
hearts skip a beat this year. 


Read the full article ~ 


图 11-7 All Music 运用 图 文 混 排 


现在 没有 任何 样式 ， 页 面 效 果 如 图 11-8 所 示 。 


div£content( 
width:600px; 
border:lpx solid $3C2811; 
background-color :#EBD8BC; 
text-align:left; 
margin-left:auto; 
margin-right:auto; 


咖啡 的 历史 


"EE RR HER CENE 
(Kaffa) d. “WAF (coffee) “一 词 就 是 源 自 于 省 名 “ 哮 法 (Eaffa) 传说 有 一 : 
i sem XHRASEEERRSRAGU. Haee. 


T 
—uWBECAMNSRREE, SUOXT. ROSEIEESIHNE. IESTAIRIEXR 
饮用 ， 用 来 使 自己 保持 清醒 


咖啡 采 实 从 埃 套 俄 比 亚 传 和 到 了 阿拉 伯 半 岛 ， 并 在 那里 被 种 植 。 接 着 咖啡 传 到 了 士 耳 其 ， 那 里 首 
次 出 现 用 火 煤 烤 出 来 的 嘿 啡 互 。 人 们 将 灶 好 的 咖啡 互 慑 侨 ， 形 后 了 今天 咖啡 的 午 形 。 


m zd SENS Aden RI T EHAR. EEH, LARRE 
TRITEmEIF WEAUCUNSAMUME RN Y, THODUURESUUUM. SAMEA 
是 ， 教 择 木 人 人 也 是 别 啡 饮用 者 ， 并 直 称 为 真正 的 基 具 教 饮 村 - 


在 18 世 纪 ， 一 个 法 国 步兵 团 上 尉 在 履 站 大 西洋 的 途中 种 植 了 一 栖 小 咖啡 村 。 这 林 听 啡 树 被 移植 
到 了 加 勒 比 将 的 马 提 尼 克 岛 ， 在 随后 50 5O FERSENI TABELU. 虽然 起 
步 当 难 ， 但 咖啡 种 植 正 是 借 此 机 会 传 遂 了 中 南美 训 的 热带 地 区 ， 


-— 


T SR, MERIENDA L, ALARTE. PH. eju 
Non. Heitt. WW. 全 这 种 商品 在 以 美元 为 单 
位 的 全 球 贸易 中 仅 次 于 石 铀 居 第 二 位 咖啡 是 世界 上 最 流行 的 饮料 ， 每 年 消耗 4000 亿 杯 。 可 
以 想象 出 ， 仅 仅 在 巴西 ， 就 有 五 百 多 万 人 从 事 种 植 和 收获 ， nr "E. 


11-8. 未 添加 样式 之 前 的 页 面 


为 了 使 页 面 增强 美观 性 ， 添 加 代码 设置 文字 大 小 、 行 间距 、 文 字 背 景 颜 色 等， 颜色 选择 咖 
Tee NN 如 果 读 者 学 习 了 前 面 的 内 容 


color:£2D1C09; 

background-color:$734F26; 

text-align:center; 

font-family:"Times New Roman", "宋体 "，serif; 


， 就 不 难 理解 每 条 规则 的 含义 。 


Es) 
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div#content hl( 
font-size:20px; 
text-align:center; 
padding-top:10px; 
letter-spacing:0.2em; 

J 

div#content p{ 
font-size:l4px; 
line-height:1.8em; 
text-indent:2em; 
padding:10px; 

$ 


效果 如 图 11-9 所 示 。 
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SANE SUE RINGIIURG. FTRROSRTIDMAPR IER. 
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M, ERES, BEHI BHW, RUUCEXHRWIRLRIDNREV CUATRO. ISNIRERUI 
KUOVPCERXESTUCTSAEN-G. WILURLEATNWH, MEAN C. 


11-9 增添 样式 后 的 效果 


现在 要 给 图 片 添加 样式 了 ， 首 先 给 3 个 img 元 素 添加 类 名 figure, 
背景 颜色 ， 略 加 修饰 。 


为 其 添加 边框 、 填 充 和 


修改 后 的 img 元 素 代码 如 下 : 

<img src-"images/coffeel.jpg" class-"figure" alt-"coffee bean" width-"200" 
height-"145" /» 

«img src-"images/coffee2.jpg" class-"figure" alt-"coffee cup" width-"170" 
height-"208" /» 

<img src-"images/coffee3.jpg" class-"figure" alt-"coffee" width-"190" 
height-"135" /» 


样式 代码 如 下 : 

img.figure( 
padding:3px; 
background-color:white; 


border:lpx solid $734F26; 
) 


图 片 的 效果 如 图 11-10 所 示 。 


O 
BHRERUSGEBSESGT [GREY PERRA DO Ren 
惊 政 的 是 ， 教 星 本 人 也 是 咖啡 次 用 者 ， 并 宣 丈 为 


图 11-10 添加 细节 内 容 修饰 图 片 ， 右 侧 为 局 部 放大 图 


最 后 一 步 就 是 要 实现 文字 环绕 在 图 片 周围 的 效果 了 ， 并 且 我 们 想 让 第 二 幅 图 片 向 右 侧 对 
齐 ， 这 些 效 果 都 要 依靠 于 float 属性 ， 它 是 使 用 CSS 进行 页 面 布 局 的 关键 之 一 ， 我 们 在 第 四 篇 
会 进行 详细 的 讲解 。 简 单 地 说 ，float 属性 可 改变 浏览 器 对 于 (X)HTML 文档 的 显示 方式 。 默 认 
情况 下 ，COHTML 文档 中 的 元 素 会 按照 顺序 由 上 至 下 出 现在 浏览 器 窗口 中 ， 内 联 元 素 会 从 左 
向 右 显 示 ， 块 级 元 素 会 独占 一 行 。 如 图 11-9 所 示 ， 标 题 、 段 落 由 上 至 下 依次 显示 ， 图 片 是 内 
联 级 的 元 素 ， 与 文字 从 左 向 右 依 次 显示 。 

float 属性 可 让 元 素 向 左 或 向 右 浮动 ,使 它 脱离 原 有 的 排列 方式 ， 挨 着 浮动 元 素 的 内 容 会 把 
该 元 素 包围 起 来 ， 因 此 使 用 float 即 可 轻松 实现 文字 环绕 图 片 的 效果 。 

我 们 添加 两 个 规则 : 

.leftAlign{ 

float:left; 


l 

.rightAlign( 
float:right; 

5 


并 相应 地 给 img 元 素 增加 类 名 : 


eM 


— 
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<img src-"images/coffeel.jpg" class-"figure leftAlign" alt-"coffee bean 
width-"200" height-"145" /» 

«img src-"images/coffee2.jpg" class-"figure rightAlign" alt-"coffee cup 
width-"170" height-"208" /> 

«img src-"images/coffee3.jpg" class-"figure leftAlign" alt-"coffee" 
width-"190" height-"135" /» 


效果 如 图 11-11 所 示 。 


LLLI 


UMUEERCEAERURSD. i37 CS SEUEHIESHRENULUE 
(Kat) 4, “UNE (como " —RRCEWET AS 
"WWE (Ruff) ”。 传说 有 一 个 名 叫 Kald 节 放羊 的 牧民 发 
,， 他 的 手 在 吃 了 村 种 生物 的 齿 买 后 表现 得 异 案 活 洗 。Kaii 
.CHEGREERITGUEGE, MOEHRUIRGCEENED 
JR. XT BEZS LSGESUBIETET. HRBTA 
PARARE HONAT melklüxa EUN. t 
IDÉES UE. ARRAZAREN. 


TIERE JURGERUTERSRIT HORS. HEERE. IRISUHHETET ERA. G 
BUBIIBIURAUSdoRIRES. ANSEF NIET XpLT TUENA, 


FGEHTB ADRESSE T Br. TA RARE 
BHOSSCCEREE SIT. VEAMOS eIRET S, 
OHRECSVISREONMUB. SAIDISCHRX. ERO DSNDEUS 
看 ， 并 宣称 为 夏 正 的 基 叔 闭 忆 料 。 


在 18 世 纪 ， 一 个 法 国 步兵 团 上 出 在 帆 路 大 西洋 的 途中 种 柱 了 
—He MER. ERMER E T inb II 8. 
在 随后 30 ERE IE NEGET B EFC EIER. BARS 
AU, CUMPERI CEL SAT "PRESENTIS 


今天 ， 时 成 为 全 球 的 大 产业 ， 从 业 人 员 两 千 多 万 。 削 

h EARE MEI Si. Np ion] 
已 尽 人 省 知 。 这 种 栈 品 在 以 要 元 为 有 位 的 全 球 贸 易 中 仅 次 
REBR R. MERR RETE EE HE4000 
， 可 以 想象 出 ， 仅 仅 在 巴西 ， 就 有 五 百 多 万 人 从 事 种 植 和 
而 品味 谢 的 数量 法 到 30 亿 样 之 巨 . 


11-11 float 属性 实现 文字 环绕 图 片 


文字 已 经 环绕 在 图 片 周围 了 ， 但 是 细节 处 理 得 不 是 很 好 ， 注 意向 左 浮动 的 两 幅 图 片 右 侧 和 
文字 之 间 没 有 空隙， 不 是 很 美观 ， 我 们 给 img 添加 id 属性 ， 并 设置 一 定 的 边 距 。 

(X)HTML 代码 如 下 : 

<img src-"images/coffeel.jpg" class-"figure leftAlign" id-"figureA" 

alt-"coffee bean" width-"200" height-"145" /» 

«img src-"images/coffee2.jpg" class-"figure rightAlign" id-"figureB" 

alt-"coffee cup" width-"170" height-"208" /» 

<img src-"images/coffee3.jpg" class-"figure leftAlign" id-"figureC" 

alt-"coffee" width-"190" height-"135" /» 


CSS 代码 如 下 : 


img#figureA, img#figureC{ 
margin:0 10px 0 0; 

} 

img#figureB{ 
margin:0 0 0 10px; 

} 


为 了 统一 边 距 大 小 ， 我 们 给 第 二 幅 图 片 也 设置 了 同样 的 边 距 ， 只 不 过 边 距 的 方向 不 同 。 最 
终 效果 如 图 11-12 所 示 。 


知 啡 的 历史 


只 起 源 二 非洲 东部 ， 这 个 地 方 就 是 现在 的 发 塞 余 #t 
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ERRIREN NERD EMGDHURUET. HA 
GESNIRHYEERASUS. ETT. TOEOSUM 

MER. fer RXSBA7CRUR. BHRBROMRR. 
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今天 提防 为 全 球 的 大 产业 ， 从 业 人 员 两 二 多 万 ,和 党 
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图 11-12 图 文 混 排 最 终 效果 


除了 用 在 正文 中 ， 图 片 还 经 常 被 用 来 装饰 一 些 链接 或 标题 文字 ( 见 图 11-13)。 
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图 11-13 


图 像 也 经 常用 来 装饰 链接 和 标题 


eB 
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通常 图 片 可 以 单独 放 在 <span> 或 <div> 标 记 中 ， 或 者 利用 背景 图 片 属性 实现 ， 这 里 介绍 的 
方法 是 直接 控制 img 元 素 样式 而 不 需要 任何 辅助 标记 。 
现 有 如 下 COHTML 和 CSS 代码 : 


at 


font-size:12px; 
text-decoration:none; 
$ 
a:link, a:visited{ 
color:#1750A5; 
} 
a:hover{ 
color:#FC7614; 
} 


«a href="http://www.huistd.com"> 欢 迎 访问 工作 室 网 站 </a> 
我 们 在 a 元 素 内 文字 之 前 插入 一 张 图 片 作为 装饰 ， 代 码 如 下 : 


<a href="http://www.huistd.com"><img src-"images/link.gif" alt-"link" /> 欢迎 


访问 工作 室 网 站 </a> 
插入 后 效果 如 图 11-14 所 示 ， 看 起 来 这 种 效果 不 能 令 人 满意 。 


加 次 迎 访问 工作 室 网 站 
图 11-14 ”插入 图 像 后 的 效果 
添加 如 下 代码 去 掉 图 像 边框 并 让 图 片 和 右 侧 文字 保持 一 定 距离 


a img( 
border:0; 
margin-right:5px; 


) 

如 图 11-15 所 示 为 修改 后 的 效果 。 
» 欢迎 访问 工作 室 网 站 
图 11-15 修改 后 效果 


现在 感觉 图 像 在 竖 直 方向 的 位 置 不 够 理想 ， 可 以 使 用 margin-bottom 属性 为 图 像 多 添加 一 
些 下 边 距 ， 另 外 ， 属 性 vertical-align 也 能 起 到 类 似 的 作用 ， 但 是 对 于 同样 的 参数 各 个 浏览 器 显 
示 却 不 一 致 ， 因 此 不 推荐 使 用 ， 我 们 添加 1px 的 下 边 距 ， 完 整 样式 如 下 ; 


at 
font-size:12px; 
text-decoration:none; 

b 

a:link, a:visited( 
color:£1750A5; 


) 

a:hover( 
color:£FC7614; 

H 

a img{ 
border:0; 
margin-right:5px; 
margin-bottom:lpx; 

) 


图 11-16 为 最 终 效果 。 
» 欢迎 访问 工作 室 网 站 
11-16 ”为 链接 添加 装饰 图 片 的 最 终 效果 


113 ”背景 和 图 像 


上 面 介绍 的 只 是 利用 一 些 公共 属性 来 为 插入 在 页 面 中 的 图 片 添加 样式 ， 现 在 该 轮 到 CSS 
本 身 发 挥 其 添加 图 像 的 功能 了 。background-image 属性 是 CSS 添加 图 像 的 关键 ， 添 加 的 图 像 是 
作为 元 素 的 背景 存在 的 ， 再 配合 其 他 与 背景 相关 的 属性 就 能 完成 样式 控制 等 功能 。 如 图 11-17 
所 示 为 Tennessee 旅游 发 展 部 门 (http://tnvacation.comy/) 的 网 站 ， 该 站 点 就 是 利用 CSS 的 背景 属 
性 添加 了 丰富 的 背景 图 像 。 

在 背景 相关 属性 之 中 只 有 一 个 是 和 图 像 无 关 的 ， 但 它 也 非常 重要 ， 这 就 是 背景 颜色 属性 
background-color， 用 于 设置 元 素 的 背景 颜色 ， 默 认 值 为 transparent， 即 为 透明 。 该 属性 的 使 用 
频率 相当 高 ， 很 多 样式 效果 都 是 依靠 这 个 属性 来 完成 的 。 

其 余 背 景 相关 属性 为 background-repeat、background-attachment 和 background-position， 它 
们 都 与 背景 图 像 相关 ， 通 常 配合 在 一 起 使 用 ， 下 面 我 们 就 分 别 进行 介绍 。 


11.3.1 设置 背景 图 像 


为 页 面 元 素 添加 一 张 背景 图 像 很 简单 ， 只 需 一 条 声明 ， 请 看 下 面 的 示例 。 
CSS 和 (X)HTML 代码 : 
div#sideBart{ 

width:300px; 

height:300px; 

background-image:url (images/flowers.jpg); 


) 


«div id-"sideBar"»div 中 文字 </div> 


规则 指定 了 div 的 宽度 和 高 度 , 从 图 11-18 可 以 看 出 背景 图 像 以 平 铺 的 方式 显示 在 元 素 中 ， 
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默认 情况 下 ,背景 图 像 在 水 平和 垂直 方向 上 都 是 重复 出 现 的 。 有 时 候 需 要 利用 这 种 特性 来 实现 
某 些 效果 ， 对 于 一 些 运用 在 整个 页 面 的 背景 图 片 ， 该 方法 使 用 率 非常 高 。 
M i 
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11-17 Tennessee 旅游 开发 部 门 网 站 


Bl 11-18 给 div 元 素 添加 背景 


在 使 用 background-image 属性 时 需要 注意 ，url 中 的 图 片 路 径 一 定 是 相对 于 CSS 出 现 的 位 
置 的 。 假 如 上 例 中 的 CSS 样式 是 由 外 部 导入 的 ， 且 样式 文件 与 该 (X)HTML 文件 位 于 不 同 的 目 
录 层 次 中 ， 那 么 图 片 路 径 就 要 相对 于 该 CSS 文件 进行 变化 。 其 他 含有 路 径 的 样式 属性 也 是 如 
此 ， 资 源 位 置 是 相对 于 CSS 文件 的 。 


11.3.2 


平 铺 背景 图 像 


background-repeat 属性 可 以 控制 背景 图 像 平 铺 的 方式 ， 其 取 值 和 含义 如 下 所 示 。 


repeat: 背景 图 像 在 纵向 和 横向 上 平 铺 。 
no-repeat: 背景 图 像 不 平 铺 。 

repeat-x: 背景 图 像 横 向 平 铺 。 

repeat-y: 背景 图 像 纵 向 平 铺 。 


例如 ， 取 消 上 例 中 背景 图 像 的 平 铺 : 


background-repeat:no-repeat; 
background-color :#CCCCCC; 


为 了 更 好 地 显示 效果 ， 将 div 元 素 背景 设 为 灰色 。 从 图 11-19 可 看 出 ， 在 div 元 素 内 图 像 
只 出 现 了 一 次 ， 没 有 任何 平 铺 效果 。 


11-19 ”取消 平 铺 
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- 些 网 站 利用 背景 的 不 同 平 铺 方式 来 实现 渐变 或 纹理 效果 , 例如 微软 中 国 网 站 首页 的 顶部 
背景 就 是 水 平平 铺 一 幅 1px 宽 378px 高 的 图 片 实现 的 ( 见 图 11-20)。 由 于 图 像 尺 寸 很 小 , 以 这 种 
方式 制作 背景 渐变 效果 可 大 大 节省 网 络 带宽 ， 加 快 页 面 下 载 的 速度 。 
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11-20 ”微软 中 国 网 站 首页 的 背景 图 片 使 用 水 平方 式 平 铺 而 成 


有 些 网 站 的 背景 是 在 水 平和 垂直 两 个 方向 上 平 铺 图 片 实现 的 ， 另 有 一 些 网 站 ， 背 景 看 上 去 
像 是 一 些 毫 无 规律 的 纹理 ， 实 际 上 是 平 铺 无 颖 贴图 实现 的 。 所 谓 无 颖 贴图， 就 是 指 图片 左 边 和 
右边 、 顶 部 和 底部 连接 在 一 起 显示 时 ， 看 不 出 丝毫 颖 除 ， 因 此 可 以 使 用 较 小 的 图 片 制作 整个 页 
面 背 景 。 

例如 Groninger Museum(http://www.groningermuseum.n1/) 网 站 页 面 背景 的 马赛 克 就 是 使 用 

- 张 图 像 平 铺 而 成 的 ， 图 片上 下 边 、 左 边 可 以 完美 地 拼接 在 一 起 ( 见 图 11-21)。 


背景 图 片 横向 和 纵向 平 铺 构成 整个 背景 
11-21 使 用 小 图 平 铺 构 成 背景 


网 络 上 有 相当 丰富 的 无 颖 贴图 资源 ， 都 可 以 直接 拿 来 或 稍 加 修改 后 应 用 到 网 页 背景 中 ， 如 
图 11-22 所 示 就 是 下 载 并 经 过 简单 处 理 的 一 张 砖 墙 图 像 ， 利 用 它 可 以 实现 砖 墙 背 景 的 效果 。 


Aa c 
图 11-22 砖 墙 素材 
在 页 面 中 添加 如 下 CSS 代码 ， 指 定 背 景 图 片 横向 纵向 平 铺 。 


body( 
background-image:url(images/backwall.jpg); 
background-repeat:repeat; 


j 
结果 如 图 11-23 所 示 ， 图 片 可 以 很 自然 地 拼接 在 一 起 ， 形 成 整个 背景 。 
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图 11-23 平 铺 图 像 制作 页 面 背 景 


11.3.3 ”背景 图 像 位 置 


通过 控制 图 像 的 平 铺 方式 可 以 制作 出 不 同样 式 的 背景 。CSS 提供 了 background-position 属 
性 , 可 用 来 控制 背景 图 像 的 位 置 , 结合 平 铺 属性 一 起 使 用 可 精确 指定 图 像 从 哪里 开始 进行 平 铺 。 

background-position 属性 值 为 两 个 ， 前 者 表示 水 平 位 置 后 者 表示 垂直 位 置 。 它 的 属性 值 可 
以 是 关键 字 、 长 度 值 和 百分比 。 


1. 关键 字 


关键 字 包 括 left、right、center、top、bottom， 水 平和 垂直 方向 组 合 起 来 使 用 可 组 合 出 9 种 
不 同 的 位 置 (图 11-24)。 

微软 中 国有 限 公司 的 首页 背景 项 部 和 底部 分 别 有 两 个 渐变 ， 分 别 在 两 个 div 元 素 中 添加 了 
背景 图 ， 如 果 查 看 代码 即 可 发 现 它们 的 background-position 属性 分 别 为 top 和 bottom, IYEN 
变 背景 图 的 一 般 步骤 为 ， 先 在 图 像 处 理 软件 中 设计 好 背景 效果 图 ， 利 用 切片 工具 提取 px 宽 的 
图 像 并 保存 成 适当 的 格式 ， 最 后 添加 CSS 样式 到 页 面 中 。 

现在 我 们 就 模仿 微软 首页 制作 项 部 和 底部 均 包含 渐 变 的 效果 , 首先 使 用 图 像 处 理 软件 设计 
好 效果 图 ( 见 图 11-25)。 把 顶部 和 底部 渐变 所 需 图 像 切割 出 来 ， 分 别 保存 为 bgTop.gif 和 
bgBottom.gif， 它 们 尺寸 为 1px 宽 200px 高 。 


图 11-25 设计 好 渐变 效果 图 


代码 如 下 所 示 : 


x 
margin:0; 
padding:0; 

} 

body( 
background-image:url(images/bgBottom.gif); 
background-repeat:repeat-x; 
background-position:left bottom; 
background-color:£9EB2FF; 
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divécontainer( 
background-image:url (images/bgTop.gif); 
background-repeat:repeat-x; 
background-position:left top; 

} 

div#content{ 
height:500px; 

a 


«div id="container"> 
<div id-"content"»«/div» 
«/div» 
规则 首先 设 定 所 有 元 素 的 边 距 和 填充 为 0, 然后 在 body 元 素 中 添加 底部 的 背景 图 , 注意 到 
其 中 的 background-position 属性 值 为 “left bottom”， 图 像 将 在 body 元 素 左下 侧 开 始 沿 着 x 轴 
方向 ( 即 水 平方 向 ) 进 行 平 铺 。 另 创建 一 个 div 元 素 放置 项 部 的 背景 图 ， 背 景 图 从 该 元 素 左 上 侧 
开始 进行 水 平平 铺 。 最 后 再 添加 一 个 div 元 素 ， 设 定 其 高 度 为 500px， 用 来 模拟 页 面 中 的 内 容 ， 
让 外 层 的 #container 能 够 有 足够 的 高 度 把 背景 图 显示 完整 。 图 11-26 为 最 终 效果 。 


图 11-26 RERA 


2. 长 度 值 

background-position 的 属性 值 还 可 以 是 长 度 值 ， 其 中 单位 px 和 em 比较 常用 ， 这 时 属性 第 
一 个 值 表示 图 像 左边 距 父 元 素 左边 的 距离 ， 第 二 个 值 表示 图 像 项 端 距 父 元 素 顶 端的 距离 ， 且 该 
属性 值 可 取 负 数 。 如 图 11-27 所 示 为 两 个 属性 值 的 含义 。 


A 


应 用 背景 图 的 元 素 
background-position:50px 30px; 


11-7 ”长 度 值 的 含义 
还 记得 11.2 节 最 后 讲 的 如 何 添加 装饰 图 片 的 内 容 吗 ? 我 们 说 过 ,除了 直接 插入 图 片 外 还 可 
以 利用 CSS 背景 图 像 属性 来 完成 。 首 先 去 掉 (X)HTML 代码 中 <img> 标 记 : 
<a href="http://www.huistd.com"> 欢 迎 访 问 工作 室 网 站 </a> 
再 添加 如 下 CSS 样式 : 


at 
font-size:l2px; 
text-decoration:none; 
background-image:url (images/link.gif); 
background-repeat:no-repeat; 

) 

a:link, a:visited( 
color:£$1750A5; 

) 

a:hover( 
color:£FC7614; 

) 

在 图 11-28 中 ， 我 们 发 现 图 像 被 盖 在 文字 下 面 了 ， 这 并 不 是 我 们 想 要 的 结果 ， 需 要 给 文字 

添加 一 些 左 填充 ， 使 其 向 右 移动 ， 让 图 像 露 出 来 。 


欢迎 访问 工作 室 网 站 
11-28 ”给 链接 添加 背景 图 片 
在 选择 符 a 中 添加 如 下 声明 ， 让 文字 向 右 移动 一 段 距离 。 
padding-left:10px; 


padding 属性 只 会 影响 盒 模型 中 内 容 部 分 ,背景 图 片 是 不 会 移动 的 ， 这 时 的 效果 如 图 11-29 
所 示 。 


> 欢迎 访问 工作 室 网 站 
1129 ” 右 移 文字 露出 图 片 
最 后 就 要 调整 背景 图 片 位 置 了 ， 在 选择 符 a 中 添加 如 下 规则 : 


background-position:0 2px; 
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该 规则 让 图 像 向 下 移动 2 个 像素 ， 图 11-30 为 最 终 效 果 。 
> 欢迎 访问 工作 室 网 站 
图 11-30 ”使 用 背景 图 像 添加 装饰 


3. 百分比 

百分比 数值 的 含义 比较 有 意思 ， 首 先 根据 百分比 值 在 背景 图 像 上 确定 一 个 位 置 作为 基准 
点 ,然后 用 该 位 置 去 对 齐 父 元 素 中 百分比 值 所 设置 的 位 置 ， 图 11-31 中 处 于 父 元 素 25% 和 75% 
的 背景 图 像 就 很 能 说 明 这 个 特点 。 


0% 0% 


E 50% 50% 


25% 75% 


100% 100% | 


11-31 百分比 值 的 含义 


当 页 面 元 素 需 要 动态 地 按 比 例 变化 的 时 候 ， 百 分 比 就 会 派 上 用 场 。 百 分 比 、 长 度 值 和 关键 
字 可 以 混合 在 一 起 使 用 。 
长 度 值 和 百分比 可 以 带 符号 ， 使 用 负 值 可 达到 只 显示 部 分 图 片 的 效果 。 比 如 下 面 的 代码 就 
可 以 让 砖 堵 图 片 只 露出 一 小 部 分 : 
div( 
width:400px; 
height:200px; 
background-image:url (images/backwall.jpg); 
background-repeat:no-repeat; 
background-position:-120px -120px; 
background-color: yellow; 


} 

<div></div> 

代码 效果 如 图 11-32 所 示 。 

图 11-33 展示 了 background-position 属性 使 用 负数 值 的 含义 。 

与 位 置 相 关 的 CSS 属性 还 有 一 个 ， 即 background-attachment， 该 属性 有 两 个 值 ， 即 fixed 
和 scroll。fixed 的 含义 是 将 背景 图 像 固定 住 ， 拖 动 滚动 条 也 不 会 影响 背景 图 的 位 置 。 而 scroll 
的 含义 是 当 拖 动 滚动 条 时 , 背景 图 像 会 跟随 页 面 其 他 内 容 一 起 滚动 , 这 也 是 浏览 器 默认 的 方式 。 
W3C 的 CSS 规范 页 面 就 使 用 了 固定 的 背景 图 ( 见 图 11-34). 


图 11-32 使 用 负 值 定位 背景 图 片 
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11-34 ” 拖 动 浏览 器 滚动 条 ， 页 面 左 侧 蓝 色 背 景 图 片 位 置 始终 不 变 


© 注意 : 在 IE6 中 ， 如 果 background-attachment 属性 应 用 在 body 以 外 的 元 素 ， 则 fixed 属 
性 值 将 不 起 作用 ， 图 像 依然 随 着 滚动 条 移动 。 


11.3.4 background 属性 


经 过 了 前 面 的 学 习 ， 读 者 已 经 掌握 了 各 种 控制 背景 图 像 的 属性 。 与 font 属性 类 似 ，CSS 提 
供 了 background 属性 作为 各 种 背景 相关 属性 的 简写 属性 。 属性 值 的 顺序 可 任意 。 以 下 儿 条 规则 
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的 效果 是 等 同 的 : 


div{ 
background-color:white; 
background-image:url (images/bg.gif); 
background-position:top left; 
background-repeat:repeat-x; 
background-attachment:fixed; 


) 
div( 

background:white url(images/bg.gif) top left repeat-x fixed; 
$ 
div{ 

background:url(images/bg.gif) repeat-x top left fixed white; 
} 


尽管 各 个 属性 出 现 的 顺序 可 任意 , 但 是 表示 位 置 的 两 个 属性 值 不 能 分 开 ， 并 要 保证 前 者 表 
示 水 平方 向 ， 后 者 表示 垂直 方向 。 


11.4 图 像 实战 


11.4.1 网 络 相册 


网 络 相册 可 算是 Web 2.0 中 最 为 常见 的 应 用 了 ， 用 户 可 以 将 自己 的 图 像 、 照 片上 传 至 网 络 
相册 , 与 他 人 分 享 。 和 当初 许多 人 使 用 表格 实现 布局 一 样 , 图 像 的 排版 也 经 常 通过 表格 来 完成 ， 
本 实战 将 向 读者 介绍 男 一 种 方法 ， 它 的 优势 在 于 使 用 简洁 的 (X)HTML 代码 放置 图 像 ， 其 余 的 
事情 都 交 给 CSS 来 完成 。 

首先 我 们 来 看 看 (X)HTML 的 结构 : 

<div class="photobox"> 

<div class="photo"> 
«img src="images/figurel.jpg”alt=" 九 寨 沟 " width-"200" height-"150" /></div> 
<p> 九 寨 沟 长 河 </p> 

«/div» 

图 像 被 放置 在 一 个 div 中 ， 并 和 放置 说 明文 字 的 p 元 素 放置 在 另 一 个 div 元 素 中 。 注 意 ， 
img 元 素 的 结束 位 置 与 后 面 的 </div> 标 记 之 间 不 要 有 任何 空白 存在 , 后 面 会 讲 为 什么 要 这 样 做 。 
按照 这 个 基本 结构 添加 更 多 的 图 像 ， 代 码 如 下 (其 中 省 略 了 一 些 重复 代码 ): 

<div id="container"> 

<h1> 我 的 相册 </h1> 
<div class="photobox"> 
<div class="photo"> 

«img src="images/figurel.jpg”alt=" 九 寨 沟 " width-"200" height-"150" /></div> 

<p> 九 赛 沟 长 河 </p> 


</div> 
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<div class="photobox"> 
<div class="photo"> 
«img src-"images/figure2.jpg" alt=" 樱 花 " width="200" height-"150" /></div> 
«p» HE«/p» 
«/div» 


«div class-"photobox"» 
«div class-"photo"» 
«img src-"images/figure6.jpg" alt-"Hilii" width-"200" height-"150" /»«/div» 
<p> 我 的 电脑 </p> 
</div> 
</div> 


我 们 添加 6 幅 图 片 到 代码 中 ， 最 后 增加 一 个 标题 ， 并 把 这 些 元 素 都 放 到 #container 容器 中 。 


COHTML 准备 完毕 ， 现 在 开始 给 img 和 了 元 素 添加 样式 代码 : 
.Photo img( 
margin:0; 
padding:10px; 
background: #FFFBCB; 
border:lpx dashed £$D8D399; 
} 
-photobox pí 
font-size:12px; 
margin:0; 


padding:3px 0 3px 24px; 
background:£FFFDE6 url(images/note.gif) 5px 4px no-repeat; 
) 
以 上 两 条 CSS 规则 给 img 元 素 添 加 了 填充 、 背 景色 和 边框 样式 ， 设 置 p 元 素 的 字体 大 小 、 
边 距 填充 和 背景 色 和 图 片 。 打 开 浏 览 器 观察 一 下 效果 ( 见 图 11-35). 


我 的 相册 


T3 九寨 沟 长 河 
Epp Hv 
11-35 给 img 和 p 添 加 样式 
图 11-36 对 比 了 IE 和 Firefox 的 显示 效果 ， 可 以 发 现 p 元 素 中 的 上 填充 在 两 个 浏览 器 中 的 
显示 效果 不 一 致 。 
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图 11-36 IE( 左 ) 和 Firefox( 右 ) 显 示 效果 对 比 ， 它 们 的 上 填充 大 小 不 一 臻 


为 此 我 们 通过 TE 条 件 注释 添加 一 些 正 特定 的 样式 : 
<!--[if IE]> 
<style type="text/css"> 
.Photobox pt{ 
padding-top:5px; 
) 
«/style» 
«![endif]--» 
现在 每 一 个 图 像 由 上 至 下 依次 排列 ， 这 是 div 元 素 的 默认 排列 方式 ， 而 我 们 希望 图 像 能 
平 排列 ， 于 是 添加 如 下 样式 : 
-photobox( 
float:left; 
width:222px; /* 200 + 20 + 2 = 222px */ 
margin:0 10px 10px 10px; 
display:inline; 
) 
这 里 又 利用 了 float 属性 ，.photobox 将 向 左 浮动 ， 水 平方 向 排列 ， 当 水 平 空间 不 足 时 自动 
转 到 下 一 行 。 元 素 宽度 设 为 222px， 它 是 图 像 宽度 (200px)、 图 像 左 右 填 充 ( 各 10px， 共 20px) 
和 左右 边框 (各 1px， 共 2px) 大 小 之 和 。margin 属性 的 作用 在 于 使 每 个 图 像 之 间 存 在 一 定 空隙 。 
display 属性 的 作用 在 第 17 章 浮动 部 分 会 详细 介绍 , 它 是 用 来 解决 正 浮 动 元 素 边 距 加 倍 的 问题 。 
预览 一 下 现在 的 页 面 效果 ， 如 图 11-37 所 示 。 


我 的 相册 


EE 我 的 电脑 


图 11-37 ”添加 浮动 属性 使 图 像 水 平 排列 (此 效果 可 能 会 由 于 浏览 器 窗口 的 大 小 不 同 而 不 同 ) 
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如 果 调 整 浏览 器 窗口 的 大 小 , 我 们 会 发 现 图片 的 位 置 会 发 生变 化 ( 见 图 11-38)。 这 是 由 浮动 
属性 产生 的 。 
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图 11-38 图 片 位 置 会 随 着 浏览 器 窗口 宽度 进行 变化 


我 们 希望 页 面 的 布局 在 任何 情况 下 都 是 统一 的 ， 每 行 固定 显示 三 张 图 片 。 这 可 以 通过 给 最 
外 侧 的 容器 #container 添加 固定 的 宽度 来 完成 : 


$container( 
width:730px; 
margin:0 auto; 


} 

每 个 .photobox 的 宽度 为 222px， 再 加 上 左右 边 距 一 共 是 242px， 一 行 三 幅 图 片 总 共 需 要 
726px， 所 以 #container 的 宽度 定 为 整数 730px。margin 属性 使 #container 居中 对 齐 。 

最 后 我 们 给 标题 hl 元 素 添加 一 些 样式 ， 本 实例 的 完整 CSS 代码 如 下 : 


<style type="text/css"> 
.photo img( 
margin:0; 
padding:10px; 
background: £$FFFBCB; 
border:lpx dashed $D8D399; 
H 
.photobox p{ 
font-size:12px; 
margin:0; 
padding:3px 0 3px 24px; 
background:£FFFDE6 url(images/note.gif) 5px 4px no-repeat; 


} 
.Photobox{ 
float:left; 
width:222px; /* 200 + 20 + 2 = 222px */ 
margin:0 10px 10px 10px; 
display:inline; 
i 
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d$container( 
width:730px; 
margin:0 auto; 


hlí 
font-size:24px; 
padding:3px 0 10px 60px; 
border-bottom:2px solid #DDD7 
background:url(images/photologo.gif) 5px 2px no-repeat; 
P 
</style> 
SI [1E IE]> 
<style type="text/css"> 
.photobox p{ 
padding-top: 5px; 
} 
</style> 
«! [endif]--» 


页 面 的 最 终 效果 如 图 11-39 所 示 。 

在 给 出 本 实例 的 (X)HTML 代码 的 时 候 ， 我 们 说 过 img 元 素 和 后 面 的 标记 之 问 不 能 留 有 任 
ARA, 那么 如 果 有 空白 存在 会 如 何 呢 ， 现在 我 们 就 来 试验 一 下 。 把 第 一 幅 图 像 对 应 的 img 元 
素 后 面 加 一 些 空白 (空格 、 换 行 或 者 制 表 符 都 可 以 )， 用 IE 浏览 器 一 下 页 面 ( 见 图 11-40)。 你 会 
发 现 第 一 幅 图 像 和 下 面 的 区 域 之 间 增 加 了 一 些 空间 ， 且 导致 第 二 行 水 平 空间 不 足 ， 使 得 最 后 一 
幅 图 像 被 挤 到 第 三 行 了 。 
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11-39 网络 相册 的 最 终 效果 
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11-40 ”增加 空白 之 后 的 页 面 效果 (IE 浏览 器 ) 

这 个 多 余 的 空间 就 是 由 img 元 素 和 其 后 的 标记 之 间 的 空白 产生 的 ， 这 是 TE 浏览 器 的 一 个 
问题 ，Firefox 和 Opera 则 会 正常 显示 。 由 于 该 问题 是 由 空白 导致 的 ， 所 以 也 可 称 其 为 TE 空白 
问题 IE Whitespace Bug)。 该 问题 不 仅 出 现在 img 元 素 中 ， 在 其 他 情况 下 也 有 可 能 发 生 ， 读 者 
在 开发 过 程 中 需要 注意 。 


114.2 圆 角 设计 


圆 角 样式 在 Web 设计 中 经 常 出 现 ， 往 往 一 个 区 域 、 一 块 内 容 都 会 采用 圆 角 设计 方案 ， 使 
页 面 看 起 来 更 美观 ( 见 图 11-41)。 


home 


About Komodo Media 


Current happenings. Right here. Right now. 


11-41 Komodo Media 网 站 的 页 面 使 用 了 圆 角 效果 (http://www.komodomedia.com) 
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首先 准备 好 4 个 圆 角 所 使 用 的 图 片 ( 见 图 11-42)， 它 们 各 用 于 矩形 区 域 的 4 个 顶点 。 


图 11-42 圆 角 图 片 
我 们 将 一 个 段落 设计 成 圆 角 样式 ，COHTML 代码 如 下 : 


«div» 
«h3»&bull; gnbsp; 圆 角 样式 gnbsp; &bu11;«/h3» 
<p> 
圆 角 样式 经 常用 于 网 站 设计 当中 ， 使 用 它 可 以 提高 页 面 的 美观 性 ， 使 页 面 元 素 看 上 去 更 柔和 。 
</p> 
</div> 


以 上 代码 包含 一 个 div， 其 中 含有 一 个 标题 和 一 个 段落 ， 我 们 希望 将 四 张 不 同 的 圆 角 图 片 
分 别 指定 到 div 的 四 个 角 上 ， 但 是 每 个 对 象 的 背景 只 能 指定 一 张 背景 图 ， 为 了 达到 此 目的 ， 我 
们 需 添加 额外 的 元 素 用 来 放置 男 外 三 张 背景 图 。 于 是 我 们 对 以 上 代码 做 如 下 修改 : 
«div class-"tl"» 
<div class-"tr"» 
<div class-"bl"» 
<div class-"br"» 
«h3»&bull; &nbsp; llf FExX&nbsp; &bull;«/h3» 
«p» 
圆 角 样式 经 常用 于 网 站 设计 当中 ， 使 用 它 可 以 提高 页 面 的 美观 性 ,使 页 面 边界 元 素 看 上 去 更 柔和 。 
</p> 
</div> 
</div> 
</div> 
</div> 
现在 4 个 div TEREE E, 里 面 含有 原来 的 标题 和 段落， 通过 class 属性 对 每 个 div 元 
素 分 别 设置 四 个 不 同 的 圆 角 图 像 ， 代 码 如 下 : 
div.tl( 
background:url(images/topleft.gif) top left no-repeat; 
} 


div.tr{ 
background:url(images/topright.gif) top right no-repeat; 


H 
div.bl( 
background:url(images/bottomleft.gif) bottom left no-repeat; 
H 
div.br( 
background:url(images/bottomright.gif) bottom right no-repeat; 


从 浏览 器 中 预览 一 下 效果 ， 发 现 4 个 圆 角 已 经 被 添加 到 指定 的 位 置 上 ( 见 图 11-43)。 
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图 11-43 ”通过 background 属性 为 4 个 div 元 素 添 加 圆 角 图 片 
正确 放置 好 圆 角 图 片 之 后 ， 我 们 继续 添加 其 他 样式 ， 完 善 效果 : 


div.tl( 
width:220px; /* 控制 整个 元 素 的 宽度 */ 
background:#464646 url(images/topleft.gif) top left no-repeat; 


) 
div.tr( 
background:url(images/topright.gif) top right no-repeat; 
) 
div.bl( 
background:url(images/bottomleft.gif) bottom left no-repeat; 


) 


div.br( 
background:url(images/bottomright.gif) bottom right no-repeat; 
padding:10px; /* 控制 其 中 填充 大 小 */ 


} 

最 外 侧 的 div 元 素 将 背景 色 设 置 成 为 与 圆 角 图 像 相 符 的 颜色 ， 添 加 width 属性 以 控制 整个 
区 域 的 宽度 ， 而 最 内 侧 的 div 控制 区 域内 部 与 其 中 内 容 之 间 的 填充 大 小 。 

最 后 我 们 再 给 h3 M p 元 素 添加 一 些 样式 ， 对 文本 适当 地 进行 排版 : 


h3( 
font-size:lem; 
color:white; 
margin-top:0; 
margin-bottom:8px; 


pt 
font-size:0.9em; 
line-height:1.8em; 
text-indent:2em; 
color:white; 
padding:0; 
margin:lpx 0; 


} 
打开 浏览 器 观察 一 下 效果 ( 见 图 11-44)， 还 不 错 吧 。 
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- 圆 角 样式 “ 


图 11-44 ”通过 炭 套 元 素 实 现 圆 角 样式 设计 


Q 延伸 在 本 例 中 ， 我 们 使 用 了 4 张 图 像 应 用 到 4 个 div 元 素 的 背景 属性 中 ， 这 样 做 可 以 
获得 最 大 的 灵活 性 ， 区 域 的 宽度 和 高 度 都 能 自由 变化 . 对 于 宽度 或 高 度 固定 的 区 
域 ,我 们 可 以 将 某 两 个 圆 角 图 像 进行 合并 ， 从 而 能 减少 嵌 套 元 素 的 使 用 ,使 页 面 
结构 更 简洁 。 


11.4.3 ”图像 替换 


Fahrner [5 ($ %44 (Fahrner Image Replacement，FIR) 是 一 种 Web 设计 方法 ， 由 Todd Fahrner 
提出 。 它 使 用 css 以 含有 文字 的 图 片 蔡 换 掉 Web 页 面 的 原始 文本 。 这 样 做 保证 了 那些 不 支持 
CSS 的 浏览 器 能 够 正常 显示 基本 的 文字 信息 ， 同 时 也 不 影响 搜索 引擎 对 信息 的 搜索 ， 而 对 于 
那些 支持 CSS 的 浏览 器 ， 文 字 的 位 置 将 显示 替换 的 背景 图 像 ， 从 而 达到 更 好 的 显示 效果 。 

首先 我 们 来 看 icebrrg(http://www.icebrrg.com) 的 logo 是 如 何 制作 的 ， 图 11-45 为 icebrrg 首 
页 的 效果 图 ， 可 以 看 出 该 站 点 使 用 图 像 来 展示 网 站 标志 。 
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11-45 icebrrg 首页 
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页 面 中 logo 部 分 的 XHTML 代码 如 下 : 
Xhl»«a href-"/" title-"Website Title">Icebrrg - Web forms made chillingly 
simple«/a»«/hl» 


hl 元素 中 含有 一 个 a 元 素 ，a 元 素 其 中 包含 了 一 段 文 字 。 下 面 是 相关 的 CSS 代码 ; 


$header hl( 
background:transparent url(i/icebrrg logo.jpg) no-repeat scroll left top; 
float:left; 
margin-top:26px; 
text-indent:-9999px; /* 将 文字 移 除 可 见 区 域 之 外 */ 
width:279px; 


) 

以 上 代码 为 hl 元 素 添加 了 背景 图 ， 同 时 将 text-indent 设置 了 一 个 较 大 的 负数 值 ， 使 得 原 
来 的 文本 移出 了 可 见 区 域 之 外 。 假 如 浏览 器 不 支持 CSS， 那 么 浏览 器 将 显示 a 元 素 内 的 文本 而 
不 是 图 片 ( 见 图 11-46)。 


lcebrrg - Web forms made chillingly simple 
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11-46 不 支持 CSS 的 浏览 器 的 显示 效果 
Superawesome(http:/sprawsm.com/) 网 站 的 导航 也 用 相同 的 处 理 方式 ( 见 图 11-47 和 11-48)。 


SUPERaWesome 4 wom asom somas coma 


At Superawesome we design for the Web. 
We're kinda good at it. ..... 


Clients Our Work The Superaweso: 


Æ 11-47 Superawesome 首页 
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At Superawesome We Desi 


图 11-48 正常 情况 下 的 导航 菜单 ( 左 ) 和 禁用 CSS 后 的 导航 菜单 ( 右 ) 
我 们 来 分 析 一 下 该 页 面 的 导航 菜单 是 如 何 实现 的 ， 其 中 的 XHTML 代码 如 下 : 


«ul id-"nav"» 
<li class-"navWork"» 
<a href-"http://sprawsm.com/work/" title-"See our portfolio"»Work«/a» 


«/1i» 

«li class-"navAbout"» 

<a href-"http://sprawsm.com/about/" title-"Know more about us"»About«/a» 
«/li» 


<li class-"navServices"» 

<a href-"http://sprawsm.com/services/" title-"Design services that we are 
offering"»5Services 

</a> 

«/1li» 

<li class-"blog"» 

<a href-"http://sprawsm.com/blog/" title-"Read the company blog"> 

Company blog 

«/a» 

</li> 

<li class="navContact"> 

<a href="http://sprawsm.com/contact/" title="Holler!">Contact</a> 

</li> 
</ul> 


导航 菜单 由 ml、1 和 a 元 素 组 成 ， 我 们 在 第 12 章 将 会 详细 讲解 列表 元 素 的 含义 和 使 用 方 
法 ， 这 里 我 们 只 关注 设计 者 是 如 何 运 用 CSS 将 文字 替换 成 图 片 的 。 添 加 到 第 一 个 正中 的 a 元 
素 的 样式 代码 如 下 : 

/* 第 一 项 菜单 的 样式 */ 

#nav li.navWork a( 


background:transparent url(../images/nav work.png) no-repeat scroll Opt; 
width:54px; 


) 


/* 链接 通用 样式 */ 
#nav li a:link, #nav li a:visited, #nav li a:hover( 
border:medium none; 
display:block; 
height:24px; 
line-height:24px; 
text-indent:-9999px; /* 将 文字 移 除 可 见 区 域 之 外 */ 


链接 的 通用 样式 将 a 元 素 内 的 文字 移 到 可 视 区 域 之 外 ， 然 后 为 每 个 菜单 项 中 的 a 元 素 添 加 
不 同 的 背景 图 片 。 
以 上 两 个 站 点 都 使 用 text-indent 属性 将 文字 隐藏 ， 类 似 地 ， 你 也 可 以 使 用 display:none 或 
者 visibility:hidden 达到 相同 的 目的 。 
这 种 图 像 奉 换 技术 也 不 是 十 全 十 美的 ， 假 如 浏览 器 支持 CSS 但 关闭 了 图 像 显 示 ， 那 么 相 
应 的 区 域 就 会 是 空白 。 Tom Gilder 和 Levin Alexander 提出 的 替换 方法 可 以 解决 这 个 问题 , 它 的 
原理 是 将 图 像 盖 在 文本 上 而 不 隐藏 文本 。 这样 当 图 像 被 禁用 时 ,下面 的 文本 就 会 显示 在 页 面 上 。 
这 种 技术 也 存在 局 限 性 ， 那 就 是 图 像 不 能 含有 透明 信息 ， 否 则 会 露出 下 面 的 文本 。 读 者 可 以 访 
Ù] http://levinalex.net/files/20030809/alternatefir.html 获得 详细 信息 。 
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JPEG, GIF 和 PNG 是 网 络 中 最 常见 的 三 种 图 像 格 式 ， 它 们 有 各 自 的 优 缺 点 和 适用 范围 。 

使 用 img 元 素 可 以 向 Web 文档 中 添加 图 像 ， 使 其 作为 文档 内 容 的 一 部 分 。 利 用 盒 模型 相 
关 的 样式 属性 可 以 给 页 面 的 图 像 添加 修饰 ， 使 用 float 属性 可 以 实现 图 文 混 排 。 

利用 CSS 的 背景 相关 属性 可 以 向 页 面 添 加 背景 和 背景 图 像 ， 这 些 属性 可 通过 background 
属性 进行 简化 。 

最 后 本 章 的 实例 部 分 介绍 了 网 络 相册 的 制作 、 圆 角 技 术 的 应 用 和 Fahmer 图 像 替 换 技 术 。 

在 下 一 章 中 ， 将 介绍 CSS 在 列表 元 素 中 的 应 用 。 


c 


第 12 章 列 x 


列表 在 网 页 中 的 用 途 非 常 广泛 ， 它 可 以 实现 文章 /新 闻 的 标题 列表 、 图 像 列 表 以 及 导航 菜 
单 等 。 本 章 将 介绍 (CX)HTML 中 与 列表 相关 的 各 种 元 素 ， 以 及 如 何 利用 相关 CSS 属性 控制 它们 
的 样式 。 最 后 将 介绍 如 何 利用 列表 设计 新 闻 标 题 列 表 和 导航 菜单 ， 其 中 导航 菜单 涉及 了 Css 
设计 中 的 滑动 门 技术 。 

本 章 主要 内 容 
列表 的 种 类 及 用 途 
如 何 格式 化 显示 列表 
使 用 CSS 更 改 列表 符号 的 外 观 
如 何 用 列表 结合 链接 实现 导航 菜单 
滑动 门 技术 


12.1 列表 元 素 


除了 文本 段落 ， 许 多 Web 内 容 是 以 列表 形式 来 呈现 信息 的 。 比 如 新 闻 标 题 、 导 航 菜单 、 
术语 定义 等 。 通 过 列表 来 传达 这 些 信 息 是 最 有 效 、 最 直接 的 方法 。 读者 可 以 浏览 一 些 基于 Web 
标准 构建 的 站 点 ， 查 看 其 源 代 码 ， 可 以 发 现 导航 菜单 、 部 分 按钮 都 是 使 用 列表 元 素 构建 的 。 如 
图 12-1 所 示 为 amazon.com 和 中 国 雅虎 的 页 面 中 使 用 列表 的 部 分 。 
活动 
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图 12-1 列表 实例 ， 左 图 为 amazon.com 首页 的 导航 菜单 ， 右 图 为 中 国 雅虎 首页 的 一 部 分 


(X)HTML 提供 了 3 种 列表 类 型 ， 它 们 是 无 序列 表 (Unordered List)、 有 序列 表 (Ordered List) 
和 定义 列表 (Definition List)， 对 应 的 (X)HTML WRAHA ul, ol 和 dl. 无 序 和 有 序列 表 中 每 一 
个 列表 项 用 li 元 素 表 示 ， 定 义 列表 则 使 用 dt 元 素 表示 术语 (Term) 项 ， 使 用 dd 元 素 表 示 定 义 
(Definition) 项 。 

1. 无 序列 表 


无 序列 表 中 各 表 项 之 间 没 有 特定 的 顺序 关系 ， 比 如 一 份 购物 清单 、 某 产品 的 功能 介绍 等 。 


Web 页 面 中 常见 的 “相关 链接 ”就 可 用 无 序列 表 实 现 。 默 认 情 况 下 ， 浏 览 器 会 为 每 个 列表 项 之 
前 添加 一 个 项 目标 记 (Marker)。 
使 用 也 元 素 可 创建 无 序列 表 ， 每 个 列表 项 可 使 用 i 元素 进行 创建 。 


2. 有 序列 表 


有 序列 表 中 各 表 项 之 间 有 顺序 关系 ， 比 如 最 近 的 新 闻 列 表 或 者 一 系列 的 操作 步骤 。 有 序 
列表 的 显示 方式 与 无 序列 表 区 别 在 于 ， 有 序列 表 中 的 表 项 之 前 使 用 的 是 序号 而 不 是 普通 的 项 
目标 记 。 

使 用 ol 元 素 可 创建 有 序列 表 ， 每 个 列表 项 可 使 用 二 元 素 进行 创建 。 

3. 定义 列表 

定义 列表 是 由 成 对 出 现 的 内 容 组 成 : 术语 项 和 定义 项 。 类似 于 字典 或 百科 全 书 中 词 条 和 对 
应 的 解释 内 容 。 

使 用 dl 元 素 可 创建 定义 列表 ， 使 用 dt 和 dd 分 别 创建 术语 项 和 定义 项 。 

下 面 的 代码 分 别 展示 了 这 三 类 不 同 的 列表 : 

<h3> 无 序列 表 : 知名 汽车 品牌 </h3> 


«ul» 
<1i> 奔 驰 </1i> 
<1i> 通 用 </1i> 
<1i> 丰 田 </1i> 
«/ul» 
<h3> 有 序列 表 : NBA 历史 得 分 榜 </h3> 
«ol» 
<1i> 贾 巴尔 38387 分 </1i> 
<1i> 卡 尔 -马龙 36928 分 </1i> 
<1i> 迈 克 尔 -乔丹 32292 分 </1i> 
«/ol» 
<h3> 定 义 列表 : Web 相关 术语 </h3> 
«di» 
«dt»CSS«/dt» 
«dd»Cascading Style Sheet: Hs /da» 
«dt»HTML«/dt» 
«dd»Hypertext Markup Language: 超 文本 标记 语言 </dd> 
«dt»DOM«/dt» 
«dd»Document Object Model: 文档 对 象 模型 </dd> 
«/di» 


如 图 12-2 所 示 为 以 上 代码 的 效果 。 

尽管 我 们 尚未 添加 任何 样式 ， 浏 览 器 还 是 以 不 同 的 方式 来 显示 这 三 类 列表 。 其 中 无 序列 表 
中 每 个 项 目前 有 实心 圆 点 作为 项 目标 记 ; 有 序列 表 被 编 上 了 序号 ; 定义 列表 中 的 术语 项 和 定义 
项 采用 了 不 同 的 缩 进 以 示 区 别 。 
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无 序列 表 : 知名 汽车 品牌 


-Ft 

。 通 用 

* 丰田 
AFIR: NBA 历 史 得 分 榜 

1. 页 巴尔 38387 分 

2. 卡尔 -马龙 36928 分 

3. 和 迈克 尔 -乔丹 32292 分 
定义 列表 : Web 相 关 术 语 


CSS 
Cascading Style Sheet: BARA 


HTML 

Hypertext Markup Language: 超 文本 标记 语言 
DOM 

Document Object Model: 文档 对 象 模型 


12-2 不 同类 型 的 列表 


现在 再 来 看 一 些 霸 套 使 用 列表 ， 代 码 如 下 : 
<h3> 无 序列 表 : 知名 汽车 品牌 </h3> 


«ul» 
<1i> 通 用 
<ul> 
<1i> 凯 迪 拉 克 
«ul» 
«li»CTS«/li» 
«li»SRX«/li» 
«li»XLRc/li» 
</ul> 
</li> 
xli /1i» 
<1i> 雪 弗 莱 </1i> 
<1i> 萨 博 </1i> 
«/ul» 
</li> 
</ul> 
<h3> 有 序列 表 : NBA 历史 得 分 榜 </h3> 
«ol» 
<1i> 贾 巴尔 383874 
«ol» 
«1i»1962 4 3 H 2 Hf] 100 4:«/1i» 
«1i»19614E 12 H 8 Hff] 78 分 </1i> 
«1i»1962 Æ 1 H 13 Hf 73 分 </1i> 
«/ol» 
</li> 
</01> 


效果 如 图 12-3 所 示 。 


无 序列 表 : 知名 汽车 品牌 


有 序列 表 : NBA 历 史 得 分 榜 
1. 页 巴尔 38387 分 
1. 1962 年 3 月 2 日 的 100 分 


2.1961 年 12 月 8 日 的 78 分 
3，1962 年 1 月 13 日 的 73 分 


图 12-3 KEIR 
我 们 看 到 在 翌 套 使 用 无 序列 表 的 时 候 ， 浏 览 器 会 给 不 同 嵌 套 层次 的 列表 项 增加 不 同 的 标 
记 ， 第 一 层 为 实心 圆 ， 第 二 层 为 空心 圆 ， 第 三 层 为 实心 方形 。 嵌 套 的 有 序列 表 的 列表 标记 仍然 
是 十 进 制 数字 。 


12.2 ”列表 相关 样式 


12.2.1 列表 样式 类 型 


这 里 说 的 类 型 不 是 指 列表 类 型 ， 而 是 每 个 列表 项 之 前 的 项 目标 记 的 类 型 。 图 12-2 中 无 序 
列表 表 项 之 前 就 有 实心 圆圈 作为 项 目标 记 ， 而 有 序列 表 中 的 标记 是 项 目的 序号 。CSS 提供 的 
list-style-type 属性 可 用 来 修改 项 目标 记 的 样式 。 通 常用 于 ul 和 ol 元 素 ， 对 于 ul 元 素 ， 该 属性 
默认 值 为 disc; XIF ol 元 素 默认 值 则 为 decimal. 

K 12-1 总 结 了 list-style-type 的 各 种 属性 值 和 它们 对 应 的 含义 。 

3& 12-1 list-style-type 各 属性 值 的 含义 


属性 值 含义 

circle 空心 圆圈 标记 ( 〇 ) 
decimal 十 进 制 数字 标记 (1、2、3、.…) 
decimal-leading-zero 十 进 制 数字 标记 ， 开 头 加 O(01. 02. 03. ..) 
disc 实 4 有 标记 (人 @) 
lower-alpha 小 写字 母 标 记 (a、b、c、.…) 
lower-roman 小 写 罗马 数字 标记 Gi、 站 、 韦 、.…) 
none 不 显示 标记 
square 正方 形 标记 ( 国 ) 
upper-alpha 大 写字 母 标 记 (A、B、C、.…) 

-roman 大 写 罗马 数字 标记 ([[、I、IH、.…) 


209 
CPN 


| 2 
| 网 页 布局 开发 指南  , 


我 们 对 上 例 的 嵌 套 列表 添加 如 下 样式 : 


ul{ 


list-style-type:square; 
} 
ul ul{ 
list-style-type:disc; 
} 
ur ul al 
list-style-type:circle; 
} 
olf 
list-style-type:upper-roman; 
} 
ol ol( 
list-style-type:lower-roman; 
) 
效果 如 图 12-4 所 示 ， 注 意 到 无 序列 表 的 第 一 级 列表 项 使 用 方块 、 第 二 级 使 用 实心 圆圈 、 
第 三 级 使 用 空心 圆圈 作为 项 目标 记 。 
有 序列 表 采 用 罗马 数字 标记 时 ， 数 字 采 用 右 对 齐 方式 。 
无 序列 表 : 知名 汽车 品牌 


有 序列 表 : NBA 历 史 得 分 榜 


I 页 巴尔 38387 分 
i。1962 年 3 月 2 日 的 100 分 
这 ，1961 年 12 月 8 日 的 78 分 
iii。1962 年 1 月 13 日 的 73 分 


12-4 {EM list-style-type 属性 更 改 默认 的 项 目标 记 


LÈ 提示 :” 对 于 circle、disc 和 square， 不 同 浏览 器 的 显示 会 存在 细微 的 差别 。 另 外 ， 标 记 和 
列表 项 内 容 使 用 相同 的 样式 属性 ， 比 如 字体 、 颜 色 等 .假如 想 分 别 设置 二 者 的 样 
式 ， 可 以 将 列表 项 单独 放 在 一 个 内 联 元 素 中 ， 比 如 span。 


除了 使 用 通用 的 阿拉 伯 数 字 、 罗 马 数 字 和 英文 字符 设置 有 序列 表 标 记 外 ，list-style-type 还 
允许 设置 与 具体 语言 相关 的 序数 符号 。 具 体 属性 值 和 含义 如 表 12-2 所 示 。 


M 
—— 
表 12-2 list-style-type 属性 值 的 含义 
属性 值 含义 
armenian 亚美尼亚 数字 
cjk-ideographic 表意 数字 (中 文 、 日 文 、 韩 文 等 亚洲 语言 ) 
georgian 格鲁吉亚 数字 
hebrew 希 伯 来 数字 
hiragana 日 语 平 假名 数字 
hiragana-iroha 日 语 平 假名 序号 
katakana 日 语 片 假名 数字 
katakana-iroha 日 语 片 假名 序号 
lower-greek 小 写 希腊 字母 
比如 我 们 将 上 例 有 序列 表 的 样式 做 如 下 修改 : 
ol ol( 


list-style-type:cjk-ideographic; 
) 
列表 会 使 用 汉字 进行 标记 ( 见 图 12-5，Firefox 浏览 器 )。 
有 序列 表 : NBA 历 史 得 分 榜 
L 页 巴尔 38387 分 
1962 年 3 月 2 日 的 100 分 


Z. 1961 年 12 月 8 日 的 78 分 
三 . 1962 年 1 月 13 日 的 73 分 


ip 


12-5 ”使 用 亚洲 语言 进行 标记 (Firefox 浏览 器 ) 


© 注意 : 正 浏 览 器 只 支持 CSS1 中 的 关键 字 : disc. circle, square. decimal, lower-roman, 
upper-roman. lower-alpha. upper-alpha 和 none. 


12.2.2 ”列表 样式 图 像 


通过 list-style-type 属性 可 以 给 列表 添加 丰富 的 标记 ， 但 是 假如 仍然 不 满意 CSS. 提供 的 这 
些 标记 符号 ， 可 以 使 用 list-style-image 属性 来 添加 自 定 义 的 图 像 标记 。 图 12-6 是 作者 准备 的 一 
张 图 片 ( 宽 为 14px， 高 为 15px)。 
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12-6 准备 列表 标记 使 用 的 图 像 
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通常 列表 标记 图 像 与 列表 中 的 文字 大 小 相当 ,否则 部 分 图 像 会 被 文字 覆盖 ， 影 响 页 面 的 美 
观 性 。 接 着 为 ul 元 素 添加 list-style-image 属性 ， 代 码 如 下 : 


ul( 
list-style-image:url (images/list.gif); 


) 
«h3»CSS 中 列表 样式 属性 </h3> 


<ul> 
<li>list-style-type</li> 
<li>list-style-image</li> 
<li>list-style-position</li> 
<li>list-style</li> 

</ul> 


效果 如 图 12-7 所 示 。 
CSS 中 列表 样式 属性 


& list-style-type 
list-style-image 
list-style-position 
list-style 


12-7 ”使 用 list-style-image 属性 添加 自 定义 的 项 目标 记 


12.2.3 ”列表 样式 位 置 


虽然 使 用 list-style-image 属性 可 以 为 项 目标 记 指 定 自 定义 的 图 片 ， 但 遗憾 的 是 我 们 不 能 精 
确 控 制图 片 的 位 置 。CSS 提供 的 list-style-position 属性 仅仅 让 我 们 指定 标记 出 现在 列表 内 容 区 
域 之 内 还 是 之 外 ， 对 应 的 属性 值 分 别 为 inside 和 outside. 

现 将 上 例 的 样式 和 (X)HTML 做 如 下 修改 : 


ul( 
list-style-image:url(images/list.gif); 
border:lpx solid black; 
list-style-position:inside; 

5 

li.outside( 
list-style-position:outside; 


} 


<h3>CSS 中 列表 样式 属性 </h3> 

<ul> 
<li>list-style-type</li> 
<li>list-style-image</li> 
<li class="outside">list-style-position</li> 
<li>list-style</li> 

</ul> 


eM 


效果 如 图 12-8 所 示 。 
CSS 中 列表 样式 属性 


—Hlist-style-type 
Cllist-style-image 
list-style-position 
list-style 


图 12-8 使 用 list-style-position 属性 设 定 标记 位 置 


给 ul 添加 边框 为 的 是 更 容易 看 出 列表 区 域 的 范围 ， 从 图 12-8 中 可 以 看 出 第 三 项 标记 位 于 
列表 区 域 的 外 侧 ， 其 余 三 项 标记 均 位 于 列表 区 域 的 内 侧 。 


LE 提示 : ”如 果 想 使 用 CSS 精确 控制 位 于 项 目 之 前 的 图 片 ， 最 好 使 用 list-style-type:none 来 
取消 默认 的 项 目标 记 ， 再 用 background 属性 为 每 个 li 元 素 添加 背景 图 片 ， 最 后 
设置 适当 的 padding 值 让 背景 图 像 显示 在 列表 文字 的 左 侧 。 我 们 在 本 章 实战 部 分 
将 采用 这 种 更 为 灵活 的 方式 来 添加 自 定义 的 项 目标 记 。 


12.24 list-style 属性 


CSS 提供 了 list-style 属性 , 它 可 以 同时 设置 多 个 列表 相关 的 CSS 属性 。 比 如 下 列 两 条 CSS 
规则 的 效果 是 一 致 的 : 
pub ds 
list-style-type:none; 
list-style-image:url("list.gif"); 
list-style-position:inside; 


) 


ul li( 
list-style:none url("list.gif") inside; 


) 


12.3 ”其 他 相关 样式 


上 面 介绍 的 是 列表 专用 的 样式 属性 ， 在 本 节 我 们 介绍 一 些 较为 常用 的 其 他 与 列表 相关 的 
样式 。 


12.3.1 边框 、 填 充 和 边 距 


盒 模型 的 这 三 个 属性 都 可 以 用 在 列表 元 素 中 ， 默 认 情 况 下 ， 列 表 是 包含 一 定 的 填充 和 边 距 
的 。 比 如 下 列 代码 会 产生 如 图 12-9 所 示 的 效果 (左边 为 正 浏览 器 ， 右 边 为 Firefox 浏览 器 ): 
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body{ 
margin:0; 
padding:0; 


ul{ 
border:lpx solid gray; 
} 


<ul> 
<1i> 项 目 1</1i> 
<1i> 项 目 2</1i> 
<1i> 项 目 3</1i> 
</ul> 


XM MIO FEV KRW IAD Wi" jf Hle Edt View Htoy Bookmarks Toos Hep 0 
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12-9 添加 了 边框 的 列表 ( 左 侧 为 IE 浏览 器 ， 右 侧 为 Firefox 浏览 器 ) 


在 以 上 两 个 浏览 器 中 ,列表 项 距离 浏览 器 左边 界 都 有 一 定 的 距离 ， 但 它们 分 属于 不 同 的 属 
性 控制 。 从 边框 的 位 置 可 以 看 出 ， 在 水 平方 向 上 ， 正 浏览 器 将 标记 放置 在 border 外 侧 ， 所 产 
生 的 距离 是 由 margin 属性 控制 的 , 而 Firefox 中 标记 位 于 border 内 , 所 产生 的 距离 是 由 padding 
属性 产生 的 。 在 竖 直 方向 上 ， 正 中 的 列表 上 边框 与 浏览 器 之 间 没 有 空隙 ，Firefox 中 的 列表 上 
边框 与 浏览 器 存在 一 定 的 距离 ， 这 个 距离 显然 是 由 margin-top 属性 控制 的 。 为 了 能 让 间距 在 两 
个 浏览 器 中 完全 去 掉 ， 必 须 将 margin 和 padding 属性 都 设 为 0。CSS 代码 如 下 : 


ul( 
border:lpx solid gray; 
padding:0; 
margin:0; 

) 


图 12-10 所 示 为 最 终 效果 。 


F Untied Document - Microsoft Intemet Exalorer T= F7 


Untitied Document - Mozilla Firefox. 
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12-10 ”去 掉 margin 和 padding 属性 ( 左 图 为 IE 浏览 器 ， 右 图 为 Firefox 浏览 器 ) 
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12.3.23 更改 布局 方式 


由 于 于 元 素 为 块 级 元 素 ， 列 表 通 常会 以 垂直 方式 排列 ， 每 个 列表 项 会 独占 一 行 。 但 有 时 候 
我 们 需要 用 列表 实现 水 平 导 航 菜单 ， 列 表 项 之 间 不 产生 换行 。 一 般 可 用 如 下 两 种 方法 取消 列表 
项 之 间 的 换行 : 
e ”更 改元 素 的 display 属性 为 mline。 默 认 情况 下 ，L 元 素 的 display 属性 值 为 block， 
把 它 更 改 为 inline， 使 其 成 为 内 联 元 素 。 但 是 内 联 元 素 会 失去 一 些 块 级 元 素 的 特性 ， 
不 能 设置 它 的 高 度 、 竖 直方 向 上 的 填充 等 。 
o ERIA li CRH float APEX lefte li 元 素 向 左 浮动 ， 换 行 被 消除 。 元 素 依 旧 保持 
块 级 元 素 的 特性 。 但 是 浮动 控制 起 来 比较 复杂 ， 有 时 元 素 嵌 套 过 多 会 产生 新 的 问题 。 
下 面 的 代码 将 元素 的 display 属性 设 为 inline， 使 得 列表 项 之 间 不 存在 换行 : 
ul{ 
margin:0; 
padding:0; 
list-style:none; 
a lit 
display:inline; 


h 


«ul» 
<1i> 首 页 </1i> 
<1i> 新 闻 </1i> 
<1i> 产 品 </1i> 
<1i> 论 坛 </1i> 
</ul> 
效果 如 图 12-11 所 示 。 
首页 新 闻 产品 论坛 
图 12-11 将 li 元 素 的 display 属性 设 为 inline 可 取消 列表 项 之 间 的 换行 
© 注意 : 不论 使 用 display:inline i£ X float:left 取消 列表 项 之 间 的 换行 ， 列 表 标 记 都 将 不 


12.4 列表 实战 


12.4.1 新 闻 列 表 


新 闻 列表 在 Web 页 面 中 出 现 的 频率 相当 高 ， 新 闻 列 表 可 用 无 序列 表 或 者 有 序列 表 来 实现 ， 
本 实战 采用 无 序列 表 实现 一 个 新 闻 列 表 。 
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首先 搭建 好 新 闻 列 表 所 需 的 COHTML 代码 : 


«div id-"news" class-"list"» 

<h3> 近 期 资讯 </h3> 

«ul» 
«li»«a href="1.htm"> 微 软 将 在 2008 年 上 半年 发 布 IE 8 的 测试 版 </a></1i> 
<li><a href="2.htm"> 图 书 《 超 越 CSS: WEB 设计 艺术 精髓 》 上 市 </a></1i> 
<li><a href="3.htm"> 微 软 与 Mozilla 浏览 器 大 战 将 愈演愈烈 </a></1i> 
<li><a href="4.htm">RIA 大 战 : Silverlight vs Flex«/a»«/li» 
<li><a href="5.htm">Mozilla Firefox 3.0 Beta 2 简体 中 文 版 发 布 </a></1i> 


</ul> 
</div> 
如 图 12-12 所 示 为 不 加 任何 样式 的 效果 。 
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12-12 ”列表 的 默认 效果 


首先 给 body. div 元 素 设 置 如 下 样式 : 
body( 
margin:lOpx; 
font-family:"Times New Roman", "宋体 "，serif; 
) 
div.list( 
font-size:l2px; 
) 
div.list h3( 
font-size:1.2em; 
} 
divinews{ 
width:280px; 
} 


我 们 让 body 元 素 保 留 10px 的 边 距 ， 设 置 div 及 其 h3 元 素 中 文字 的 大 小 ， 最 后 设 定 整个 
列表 宽度 为 280px。 效 果 如 图 12-13 所 示 。 
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e 微软 将 在 2008 年 上 半年 发 布 正 8 的 测试 版 
e 图 书 (BECS: WEB 设 计 艺 术 精 髓 》 上 市 
。 微软 与 Mozills 浏 览 器 大 战 格 仿 演 仿 烈 

e RIA 大 战 : Silverlight vs Flex 

e Mozilla Firefox 3.0 Beta 2 简体 中 文 版 发 布 


图 12-13 设置 body、div、h3 元 素 样式 


下 面 给 列表 元 素 和 其 中 的 链接 元 素 添加 如 下 的 样式 : 


div.list uli 
list-style:none; 
margin:0; 
padding:0; 
background: #EFEFEF; 

} 

div.list ul li{ 
line-height:1.8em; 

) 

div.list ul li a( 
color:$000066; 
text-decoration:none; 

H 

div.list ul li a:hover{ 
color:#0066CC; 
text-decoration:underline; 


) 


以 上 代码 取消 了 浏览 器 对 列表 添加 的 默认 样式 , 除去 所 有 的 边 距 和 填充 , 并 设置 了 背景 色 。 
将 五 元 素 的 行距 设 为 1.8em。 最 后 指定 链接 的 颜色 和 下 划 线 。 效 果 如 图 12-14 所 示 。 
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微软 格 在 2008 年 上 半年 发 布 正 $ 的 测试 版 
EB 《超越 CSS : WEBRIFZ RARE) Erh 
油 软 与 Mozilla 浏 览 器 大 战 将 愈 演 念 烈 

RIA 大 战 : Silverlight vs Flex 

Mozilla Firefox 3.0 Beta 2 简体 中 文 版 发 布 


图 12-14 ”除去 默认 样式 、 设 置 行 间距 后 的 效果 


为 了 进一步 美化 外 观 ， 要 求 每 条 新 闻 标 题 之 前 有 图 标 装饰 ， 行 与 行 之 间 有 线条 分 隔 。 图 片 
如 图 12-15 所 示 。 


12-15 ”图标 和 分 隔 线 图 片 


标题 之 前 的 图 标 可 以 使 用 a 元 素 中 的 背景 属性 添加 ,而 各 行 之 间 的 线条 可 通过 元 素 的 背 
景 属性 添加 。 于 是 我 们 在 a 元 素 中 添加 如 下 声明 : 


N 


— 
| 网 页 布局 开发 指南 , 


background:url(images/news.gif) no-repeat left lpx; 
padding-left:16px; 


而 在 二 元 素 中 添加 的 声明 如 下 : 
background:url(images/line.gif) repeat-x left bottom; 
效果 如 图 12-16 所 示 。 
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加 微软 格 在 2008 年 上 半年 发 布 正 8 的 测试 版 
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O 油 软 与 Mozilla 浏 览 器 大 战 将 合演 念 列 

E) RIAM: Silverlight vs Flex — i 
E) Mozilla Firefox 3.0 Beta 2 简体 中 文 版 发 布 


图 12-16 添加 自 定义 标记 和 分 隔 线 


我 们 并 不 想 让 分 隔 线 贯穿 整个 列表 区 域 ， 想 让 左右 各 空 出 一 部 分 。 给 ul 元 素 添加 一 些 填 
充 即 可 : 

padding:0 10px 4px 10px; 

最 后 再 调整 一 下 标题 的 样式 属性 ， 完 整 的 样式 代码 如 下 : 


body( 
margin:lO0px; 
font-family:"Times New Roman", "宋体 "，serif; 

) 

div.list( 
font-size:12px; 

) 

div.list h3( 
font-size:1.2em; 
margin:6px 0; 
padding-left:8px; 


H 

div#news{ 
width:280px; 

} 


/* style for the list */ 
div.list ul( 
list-style:none; 
margin:0; 
padding:0; 
background: #EFEFEF; 
padding:0 10px 4px 10px; 
b 
div.list ul lif 
line-height:1.8em; 


background:url(images/line.gif) repeat-x left bottom; 
H 
div.list ul li at 
color:$000066; 
background:url(images/news.gif) no-repeat left lpx; 
text-decoration:none; 
padding-left:16px; 
} 
div.list ul li a:hover( 
color:£0066CC; 
text-decoration:underline; 


) 
最 终 效果 如 图 12-17 所 示 。 
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12-17 ”新 闻 列表 最 终 效 果 


1242 导航 菜单 


几乎 没有 不 存在 导航 菜单 的 网 站 ， 导 航 菜单 通常 也 是 用 列表 来 实现 的 。 图 12-18 展示 了 几 
种 常见 的 导航 菜单 。 通 过 查看 源 代码 会 发 现 ， 这 些 导航 无 一 例外 地 使 用 也 和 二 元 素 。 
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3085 gs ng ep x4 KANA WERS OETGUE sS | 招聘 护肤 |E 


12-18 几 种 常见 的 导航 菜单 


延伸 :一 个 优秀 的 Web 导航 设计 能 让 网 站 结构 更 加 清晰 、 帮 助 访问 者 尽快 找到 所 需 信 
息 。 导 航 设计 涵盖 的 知识 很 多 ， 有 兴趣 的 读者 可 参考 O'Reilly 出 版 的 Designing 
Web Navigation 一 书 。 


E] 
© 


e. 


c 


HTML-CSS IBEZELSILGLESE. 


现在 有 一 份 设计 好 的 导航 菜单 效果 图 (如 图 12-19 所 示 , 较 浅 的 背景 表示 鼠标 悬 停 在 菜单 上 
和 当前 菜单 )， 且 要 求 文字 大 小 可 依据 浏览 器 的 设置 进行 变化 ， 但 不 能 影响 整体 效果 。 我 们 的 
任务 就 是 用 符合 标准 的 (X)HTML 和 CSS 代码 组 织 成 Web 页 面 上 可 用 的 导航 菜单 形式 。 


根据 效果 图 和 要 求 ， 我 们 首先 将 图 片 在 竖 直 方向 上 进行 扩展 ( 见 图 12-20)。 


从 中 分 割 出 如 下 三 幅 图 片 ( 见 图 12-21) 分 别 作 为 导航 菜单 的 背景 (nav_bg.gifj、 分 阳线 


鼠标 悬 停 在 菜单 上 和 当 
前 菜单 的 效果 


EEEE 


图 12-19 导航 菜单 效果 图 


普通 状态 菜单 


图 12-20 处理 过 后 的 导航 菜单 


Cnav_divider.gi 站 和 处 于 悬 停 、 当 前 菜单 状态 的 背景 av_highlightgip)。 


图 12-21 导航 菜单 的 背景 和 分 隔 线 


下 面 我 们 使 用 列表 元 素 构建 导航 所 需 的 COHTML 代码 : 


«div id="navContainer"> 
«ul» 


<li><a href="1.htm"> 主 页 </a></1i> 
<li><a href="2.htm"> 产 品 </a></1i> 
<li><a href="3.htm"> 资 讯 </a></1i> 
<li><a href="4.htm"> 下 载 </a></1i> 
<li><a href="5.htm"> 论 坛 </a></1i> 
<li><a href-"6.htm"> 联 系 我 们 </a></1i> 


</ul> 


</div> 


导航 背景 放置 在 div 元 素 中 ， 分 隔 线 放 置 在 再 元 素 中 ， 表 示 悬 停 和 当前 状态 的 背景 放置 在 


a 元 素 中 。CSS 代码 如 下 : 


div#navContainer{ 


background:url(images/nav bg.gif) repeat-x left top; 


border-top:lpx solid #A7C0D6; 


border-bottom:lpx solid £9BAFDE; 


float:left; 


ulf{ 
list-style:none; 
padding:0; 
margin:0; 
margin:0 2em; 

} 

ul li( 
float:left; 


background:url(images/nav divider.gif) no-repeat left top; 


) 


ul li at 


font:bold 0.8em "Times New Roman", "ít", serif; 


display:block; 

color:£11449E; 

text-decoration:none; 

padding:7px llpx 4px l4px; 
) 


ul li a:hover( 


background:url(images/nav highlight.gif) repeat-x -2px top; 


) 
效果 如 图 12-22 所 示 。 


EE E 


12-22 ”添加 样式 后 的 菜单 效果 


仔细 观察 会 发 现 当 按钮 处 于 悬 停 状 态 时 ，a 元 素 的 浅 色 背 景 遮盖 住 了 左 侧 的 分 隔 线 ， 这 个 
问题 很 好 解决 ， 我 们 给 每 个 下 元 素 添加 2 个 像素 的 左 填充 ， 使 里 面 的 a 元素 向 右 侧 移动 ， 让 分 
隔 线 显 露出 来 。 同 时 ， 为 了 让 文字 与 左 分 隔 线 的 距离 不 变 ，a 元 素 的 左 填充 需要 减少 2 个 像素 ， 
这 样 就 达到 平衡 了 。 需 要 添加 和 修改 的 代码 如 下 : 


ul li( 
padding-left:2px; 
H 
ul li a( 
padding:7px llpx 4px 12px; 
} 


/* display the divider */ 


em) 
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于 每 个 二 元 素 中 只 有 一 张 分 隔 线 的 图 片 ， 因 此 最 后 一 项 菜单 的 右 侧 还 缺少 一 条 分 隔 线 。 
我 们 可 采用 如 下 办 法 解决 这 个 问题 , 在 最 后 一 项 菜单 的 右 侧 再 增加 一 幅 背 景 图 片 ，span 元 素 的 
background 属性 已 经 负责 显示 其 左 侧 的 分 隔 线 ， 而 a 元 素 也 要 负责 显示 菜单 处 于 hover 状态 时 
的 背景 图 ， 因 此 考虑 增加 新 的 (X)HTML 元 素 : 
<li><span class="divider"><a href="6.htm"> 联 系 我 们 </a></span></1i> 
然后 添加 如 下 样式 代码 : 
span.divider{ 
display:block; 
padding-right:2px; 
background:url(images/nav divider.gif) no-repeat right top; 
) 
display 属性 设 为 block 之 后 ，span 元 素 才能 按 其 子 元 素 a 大 小 而 变化 。padding-right 设 为 
2px， 保 证 显示 出 背景 图 像 。 效 果 如 图 12-23 所 示 。 


主页 产品 AW TE 论坛 联系 我 人 ， 


1223 ”增加 一 条 分 隔 线 

前 面 在 需求 中 还 提 到 了 要 有 当前 菜单 的 状态 ,表示 访问 者 目前 浏览 的 位 置 。 我 们 添加 一 个 
新 类 current 表示 菜单 的 “当前 ”状态 ， 并 添加 如 下 样式 代码 : 

ul li.current a( 

background:url(images/nav highlight.gif) repeat-x -2px top; 

) 

只 要 为 i 元素 添加 属性 class=“curent "就 可 以 使 其 处 于 “当前 ”状态 。 如 图 12-24 所 示 为 
将 第 一 个 二 元 素 的 class 属性 设 为 current 后 的 效果 。 


主页 产品 AW TE 论坛。 联系 我 们 
图 12-24 ”修改 后 的 菜单 效果 


注意 到 我 们 在 设 定 a 元 素 中 的 字体 大 小 时 使 用 了 单位 em， 这 是 个 相对 大 小 的 单位 ， 表 示 
文字 将 相对 于 浏览 器 默认 的 文字 大 小 进行 变化 ， 现 在 将 浏览 器 文字 大 小 设 为 “最 大 ”( 依 次 音 
击 焉 浏览 器 菜单 中 的 “查看 ”一 “文字 大 小 ”一 “最 大 ”命令 )， 则 会 出 现 如 图 12-25 所 示 的 
效果 。 


主页 产品 资讯 FR 论坛 KARN 
12-25 ”设置 文字 大 小 为 “最 大 ”后 的 效果 


从 图 1225 中 可 以 看 出 ， 文 字 变 大 了 ， 导 航 菜单 的 高 度 也 随 着 增 大 ， 但 由 于 使 用 了 高 度 足 
够 大 的 图 片 作为 元 素 的 背景 ， 才 不 会 出 现 “ 撑 破 ”的 现象 。 


c 


Q 延伸 ， 在 本 例 中 ,背景 图 的 高 度 超出 了 导航 菜单 实际 的 高 度 ， 这 种 方法 被 称 作 滑动 门 技 
术 ， 以 这 种 方式 制作 的 界面 能 够 适应 动态 缩放 或 变化 的 内 容 。A List Apart 网 站 
上 有 关于 滑动 门 技术 的 文章 ， 有 兴趣 的 读者 可 以 访问 如 下 网 址 : 
http://www.alistapart.com/articles/slidingdoors 
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本 章 介绍 了 (X)HTML 中 的 3 种 列表 : 无 序列 表 、 有 序列 表 和 定义 列表 ， 列 表 经 常用 来 实 
现 Web 页 面 中 的 新 闻 、 资 源 列表 、 菜 单 导航 等 内 容 ， 使 用 频率 较 高 。 

列表 专用 的 3 个 CSS 属性 为 list-style-type、list-style-image 和 list-style-position， 它 们 的 缩 
写 属性 为 list-style。 

盒 模型 相关 属性 也 经 常用 于 控制 列表 样式 ,注意 正 和 Firefox 浏览 器 中 列表 默认 的 padding 
和 margin 属性 是 不 同 的 。 

有 两 种 方法 可 取消 列表 项 之 间 的 换行 ， 将 display 属性 设 为 inline， 由 块 级 元 素 改 为 内 联 元 
素 ; 或 者 使 用 float:left 将 元 素 向 左 浮动 。 二 者 各 有 优 缺 点 。 

下 一 章 将 介绍 表格 的 使 用 以 及 如 何 用 CSS 美化 表格 的 样式 。 
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表格 起 初 被 误 用 作 页 面 布局 的 工具 ， 但 是 它 的 真正 用 途 是 用 来 显示 表格 化 的 数据 。 本 章 
将 向 读者 介绍 CX)HTML 中 与 表格 相关 的 各 种 元 素 ， 以 及 如 何 利用 它们 来 组 织 表 格 化 的 数据 。 接 
下 来 将 介绍 CSS 中 与 表格 相关 的 样式 属性 ， 如 何 设置 表格 的 大 小 、 控 制 表格 中 文字 的 对 齐 方 
式 。 在 本 章 的 实例 部 分 ， 将 介绍 如 何 制作 斑马 线 效果 的 表格 以 及 如 何 使 用 表格 来 实现 一 个 在 线 
日 历 。 

本 章 主要 内 容 
COHTML 中 与 表格 相关 的 标记 
正确 使 用 表格 
表格 边框 模式 和 样式 
控制 表格 宽度 和 高 度 
控制 表格 内 容 对 齐 方式 


13.1 使 用 表格 


13.1.1 表格 用 途 


在 实际 生活 中 ， 我 们 经 常 接触 表格 ， 比 如 通讯 录 、 比 赛 成 绩 、 课 程 表 等 内 容 都 是 通过 表格 
的 形式 呈现 出 来 的 。 表 格 如 此 常见 ， 以 至 于 Web 页 面 中 不 能 没有 它 ，(X)HTML 中 就 包含 了 创 
建 表格 所 需要 的 各 种 标记 。 

但 是 ， 表 格 曾经 被 许多 设计 者 用 来 规划 页 面 布局 ， 为 了 达到 某 种 效果 ， 不 得 不 嵌 套 使 用 大 
量 的 表格 ， 最 终 导 致 页 面 灵活 性 很 差 ， 代 码 也 显得 繁琐 。 

尽管 可 以 用 表格 来 布局 ， 但 是 这 并 不 是 表格 正确 的 用 途 。 表 格 应 该 用 来 展现 那些 适合 表格 
化 显示 的 信息 ， 而 不 是 作为 一 种 布局 工具 。 


13.1.2 RETA 


与 表格 相关 的 元 素 有 table, colgroup, col, tr, th, td, caption, thead, tbody 和 tfoot， 看 
上 去 内 容 不 算 少 ， 现 在 就 分 别 进行 介绍 。 

1. 基本 表格 元 素 

尽管 与 表格 相关 的 (X)HTML 元 素 相 当 多 , 但 是 构建 一 个 最 简单 的 表格 只 需要 table, tr 和 td 
这 三 个 元 素 。table 元 素 表示 整个 表格 , tr 表示 表格 中 的 一 行 , td 在 tt 元 素 内 部 使 用 ,表示 一 个 
单元 格 。 


下 面 的 代码 建立 了 一 个 两 行 三 列 的 表格 : 


>2007 


效果 如 图 13-1 所 示 。 尽 管 使 用 的 是 表格 元 素 ， 但 是 大 多 数 浏览 器 在 默认 情况 下 并 不 显示 
表格 的 边框 。 


2007-12-12 活 塞 - 灰 甬 113 - 103 
2007-12-12 猛 龙 - 老大 100 - 88 


图 13-1 基本 表格 

基本 标记 还 包括 也 和 caption 元 素 ， 也 和 td 类 似 ， 也 在 tr 内 部 出 现 ， 但 也 表示 的 是 一 个 

表 头 (Header) 而 不 是 普通 的 单元 格 。caption 元 素 包含 了 表格 的 标题 。 我 们 给 上 面 的 代码 添加 也 
和 caption 元 素 。 注 意 caption 元 素 需 要 紧 跟 在 <table> 标 记 之 后 : 


代码 效果 如 图 13-2 所 示 ， 表 格 的 标题 位 于 项 端 ， 表 头 文字 显示 为 粗 体 并 且 水 平 居中 于 单 
元 格 中 。 
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近期 赛况 
日 期 球 队 比分 
2007-12-12 活 塞 - 灰 甬 113 - 103 
2007-12-12 XE, - ZS 100 - 88 


图 13-2 为 表格 添加 th 和 caption 元 素 
2. 高 级 表格 标记 


COHTML 提供 了 3 个 按 行 定义 表格 区 域 的 元 素 , 它们 是 thead, tbody 和 tfoot. thead 和 tfoot 
分 别 定义 了 表 头 和 表 底 区 域 ，tbody 则 可 以 将 表格 划分 为 多 个 部 分 ， 具 体 如 何 划 分 要 根据 实际 
需要 而 定 。 这 种 划分 是 位 于 逻辑 层面 上 的 ， 目 的 是 使 得 表格 结构 更 为 清晰 。 

比如 我 们 可 以 给 前 面 的 表格 添加 三 个 区 域 的 定义 : 


<table> 
<caption> 近 期 赛况 </caption> 
<thead> 
«tr» 
«th» Hlfic/tn» 
<th> 球 队 </th> 
<th> 比 分 </th> 
</tr> 
</thead> 
«tfoot» 
«tr» 
«td colspan="3"> 点 击 此 处 查看 比赛 详情 </td> 
</tr> 
</tfoot> 
<tbody> 
«tr» 
«td id-"r2c1l"52007-12-12«/td» 
«td id="r2c2"> 活 塞 - Xfic/ta» 
<td id-"r2c3"5113 - 103«/td» 
«/tr» 
«tr» 
«td»2007-12-12«/td» 
<td> 狐 龙 - 老 应 </td> 
«td»100 - 88«/td» 
«/tr» 
</tbody> 
</table> 


在 上 面 代 码 中 ，tfoot 内 部 的 td 元 素 使 用 了 colspan 属性 ， 它 的 含义 是 将 单元 格 扩展 到 多 个 


列 ， 类 似 地 还 有 rowspan 属性 。 可 以 注意 到 ， 尽 管 tfoot 元 素 的 代码 位 于 tbody 之 前 ,但 显示 的 
时 候 总 是 位 于 tbody 之 后 ( 见 图 13-3)。 


cM 


近期 赛况 
日 期 球 队 比分 
2007-12-12 182€ - 灰 能 113 - 103 
2007-12-12 LX, - 老 广 100 - 88 
点 击 此 处 查看 比赛 详情 


图 13-3 ”添加 逻辑 区 域 划分 


COHTML 中 的 表格 是 以 行为 中 心 的 ， 即 在 创建 表格 的 过 程 中 先 定义 行 元 素 ， 然 后 在 其 内 
部 定义 每 个 单元 格 。 当 然 也 可 以 将 表格 看 作 列 的 集合 ， 使 用 colgroup 和 col 元 素 即 可 实现 。 

colgroup 元 素 可 按照 列 将 table 划分 成 多 个 组 , 假如 一 个 6 列 的 表格 按 列 分 为 两 组 , 可 用 如 
下 代码 : 


<colgroup id="cgl" span="2"></colgroup> 
<colgroup id-"cg2" span="4"></colgroup> 


以 上 代码 将 表格 前 两 列 和 后 四 列 分 为 两 个 不 同 的 组 ， 这 是 由 span 属性 确定 的 。 使 用 col 
元 素 可 将 表格 分 得 更 细致 ， 每 个 col 元 素 代表 表格 中 的 一 列 。 比 如 : 


<colgroup> 
<col id-"cl" /> 
<col id="c2" /> 
</colgroup> 
<colgroup> 
<col id-"c3" /> 
<col id="c4" /> 
<col id="c5" /> 
<col id="c6" /> 
</colgroup> 


每 个 表格 元 素 所 包含 的 属性 及 其 具体 含义 在 这 里 不 做 详细 讲解 , 需要 进一步 了 解 的 读者 请 
参考 其 他 相关 书籍 。 


13.2 边框 样式 


本 节 将 为 13.1 节 所 示 的 表格 添加 样式 。 与 表格 关系 较为 密切 的 样式 为 表格 的 边框 、 单 元 格 
内 部 的 填充 、 单 元 格 之 间 的 间距 、 背 景色 、 文 字 对 齐 方式 等 。 表 格 元 素 中 的 某 些 属性 (border、 
cellspacing 等 ) 可 完成 与 CSS 类 似 的 设 定 表格 样式 的 功能 ， 但 CSS 控制 得 更 为 出 色 ， 因 此 不 推 
荐 使 用 元 素 的 属性 ， 让 样式 全 部 由 CSS 管理 。 


13.2.1 border 属性 


边框 可 以 说 是 表格 最 常见 的 样式 之 一 ， 仿 佛 没有 边框 的 表格 不 能 算是 一 个 真正 的 表格 。 
相信 读者 已 经 想到 盒 模型 的 border 属性 了 ， 首 先 给 table 添加 border 属性 : 
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table( 
border:lpx solid black; 
J 


<table> 

<caption> 近 期 赛况 </caption> 

«tr» 
<th> 日 期 </th> 
<th> 球 队 </th> 
<th> 比 分 </th> 

</tr> 

«tr» 
«td»2007-12-12«/td» 
<td> 活 塞 - 灰 熊 </td> 
<td>113 - 103«/td» 

«/tr» 

Spo 
«td»2007-12-12«/td» 
<td> 猛 龙 - XIE/ta» 
«td»100 - 88</td> 

</tr> 

</table> 


从 图 13-4 看 出 ， 给 table 元 素 添加 边框 属性 后 ， 边 框 只 应 用 在 表格 的 最 外 侧 ， 而 内 部 的 单 
元 格 之 间 没 有 边框 ， 另 外 表格 的 标题 位 于 边框 外 侧 。 


近期 赛况 


日 期 球 队 比分 
2007-12-12 182€ - 灰 能 113 - 103 
2007-12-12 猛 龙 - Ef 100 - 88 


13-4 给 table 元 素 添加 border 属性 
通常 表格 内 部 各 个 单元 格 之 间 要 用 线 框 分 隔 开 ，table 的 border 属性 并 没有 起 到 作用 ， 于 
是 我 们 尝试 再 给 表 头 也 元 素 和 单元 格 td 元 素 添加 border 属性 。 


th, td( 
border:lpx solid black; 


) 
图 13-5 为 添加 代码 之 后 的 效果 。 

近期 赛况 
日 期 球 队 比分 


[2007-12-12] && - 灰 甬 13 - 103 
200712312]& X. - #8100 - 88 


13-5 给 th fü td 元 素 添加 border 属性 


现在 表 头 和 单元 格 都 拥有 了 自己 的 边框 , 假如 我 们 希望 表 头 或 单元 格 之 间 用 1 个 像素 宽 的 
单一 线 框 分 隔 ， 该 如 何 实现 呢 ? 浏览 器 在 默认 情况 下 给 单元 格 添加 了 间距 ， 使 得 单元 格 之 间 存 
在 空 除 。 下 面 的 内 容 将 会 告诉 读者 如 何 用 CSS 控制 这 个 间距 。 


13.2.2 border-spacing 属性 


CSS 的 border-spacing 属性 等 同 于 table 元 素 的 cellspacing 属性 ,可 用 来 控制 单元 格 的 间距 。 
属性 值 为 一 个 值 的 时 候 表示 单元 格 四 个 方向 上 与 相 邻 单元 格 之 间 的 距离 ; 若 属性 值 包含 两 个 值 
的 时 候 ， 则 前 者 表示 水 平方 向 上 的 间距 ， 后 者 表示 竖 直 方向 上 的 间距 。 

现在 给 上 面 示例 中 的 table 元 素 中 增加 如 下 声明 : 

border-spacing:lem; 

从 图 13-G(Firefox 浏览 器 ) 中 可 以 看 出 ， 单 元 格 之 间 的 距离 被 扩大 了 。 

近期 赛况 
日 期 球 队 比分 
moma BER — A] [us - ij 


[oor3242] [RE - ZE) [oo - 88 


13-6 以 border-spacing 更 改 单元 格 间距 (Firefox 浏览 器 ) 
车 将 上 面 的 声明 改 为 : 
border-spacing:10px 0; 


则 会 产生 如 图 13-7(Firefox 浏览 器 ) 所 示 的 效果 , 单元 格 水 平方 向 间距 为 10px， 竖 直方 向 间 
距 为 0。 


13-7 border-spacing 可 分 别 控制 单元 格 水 平和 垂直 方向 上 的 间距 (Firefox 浏览 器 ) 


© 注意 : 由 于 下 浏览 器 不 支持 border-spacing 属性 ,因此 只 能 在 table 元 素 中 添加 cellspacing 
属性 以 达到 相同 的 效果 。 但 cellspacing 属性 没有 border-spacing 灵活 ， 不 能 分 别 
控制 水 平和 垂直 方向 的 间距 。 


13.2.3 ”边框 模式 


现在 可 以 解决 13.2.1 节 中 提出 的 问题 了 ， 假 如 想 让 上 面 示例 中 的 单元 格 之 间 的 线 框 只 有 1 
个 像素 宽 ， 该 怎么 实现 ? 这 涉及 到 了 CSS 中 的 边框 模式 (Border Modal) 的 概念 ， 针 对 表格 边框 
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CSS 提供 了 两 种 不 同 的 模式 : 分 离 (Separated) 边 框 模式 和 塌陷 (Collapsed) 边 框 模 式 。 分 离 模 式 
意味 着 表格 内 每 个 单元 格 之 间 是 分 开 的 ， 当 单元 格 之 间距 离 为 0 时， 边框 会 紧 挨 在 一 起 ,但 不 
会 重 琶 。 塌 陷 模 式 表 示 单 元 格 之 间 是 连续 的 ， 相 邻 单元 格 的 边框 “塌陷 ”在 一 起 ， 即 重印 为 一 
条 边框 。 使 用 border-collapse 属性 可 对 边框 模式 进行 选择 。 属 性 值 separate 和 collapse 分 别 对 
应 分 离 模式 和 塌陷 模式 。 

1. 分 离 模 式 

在 分 离 模式 下 ， 表 格 中 单元 格 之 间 是 分 离 的 ， 即 存在 一 定 的 空间 ， 如 图 13-5 所 示 的 表格 
就 处 于 该 模式 下 。 这 是 大 部 分 浏览 器 默认 的 边框 模式 。 在 分 离 模式 下 我 们 可 以 通过 设 定 
border-spacing 属性 来 更 改 单元 格 间距 。 

图 13-8 为 添加 声明 border-spacing:0 后 在 Firefox 浏览 器 中 显示 的 效果 , 它 和 设 定 cellspacing 
属性 为 0 的 效果 相同 。 


近期 赛况 
| B3 | 球 队 | 比分 | 
13-8 ”使 用 border-spacing 属性 取消 单元 格 之 间 的 距离 (Firefox 浏览 器 ) 


这 样 单元 格 的 边框 就 紧 挨 在 一 起 了 ， 形 成 了 2 个 像素 宽 的 线 框 ， 即 形成 了 所 谓 的 双重 边框 
(Double Borders)。 但 是 如 何 做 到 让 边框 只 有 1 个 像素 宽 呢 ? 塌陷 模式 可 以 解决 这 个 问题 。 

2. 塌陷 模式 

在 塌陷 模式 下 , 表格 中 相 邻 单元 格 的 边框 重 夺 在 一 起 , 在 实际 中 要 比分 离 模式 的 使 用 广泛 。 
由 于 相 邻 单元 格 共享 边框 ， 当 border 属性 存在 冲突 时 ， 要 根据 以 下 规则 处 理 : 

€ ”如 果 border-style 属性 设置 为 hidden， 其 他 所 有 边框 样式 将 不 起 作用 。 

€ ”如 果 border-style 属性 设置 为 none， 其 他 任何 边框 样式 都 将 起 作用 。 

e ”除了 将 border-style 属性 设 为 hidden， 较 粗 的 边框 将 覆盖 较 细 的 边框 ， 如 果 相 邻 单元 
格 的 边框 粗细 一 致 ， 边 框 样式 将 按照 如 下 顺序 显示 : double. solid. dashed. dotted, 
ridge. outset, groove. inset. 

e ”如 果 相 邻 单元 格 的 边框 粗细 和 样式 均一 致 ,但 颜色 相 异 ,边框 颜色 将 按照 如 下 顺序 决 
定 : 单元 格 、 行 、 行 组 、 列 、 列 组 、 表 格 。 

并 不 是 所 有 的 浏览 器 都 能 严格 遵循 以 上 规则 。 在 不 同 浏览 器 上 的 实现 存在 细微 的 差别 ,但 

在 一 般 情况 下 这 种 冲突 很 少 发 生 ， 因 此 这 里 不 做 过 多 讨论 ， 感 兴趣 的 读者 可 以 自己 进行 试验 。 
现在 我 们 给 上 一 示例 中 的 table 元 素 添加 如 下 声明 : 


border-collapse:collapse; 


效果 如 图 13-9 所 示 ， 这 也 是 我 们 经 常见 到 的 表格 样式 。 


近期 赛况 
日 期 | 球 队 比分 
2007-12-12]&3€ - 灰 甬 |113 — 103 
2007-12-12] 7. - #8100 - 88 


图 13-9 ”使 用 border-collapse 属性 将 相 邻 边框 重 全 在 一 起 


13.3 与 表格 相关 的 样式 


13.3.1 caption-side 属性 


表格 的 标题 由 caption 元 素 确 定 ， 默 认 情况 下 标题 位 于 表格 顶部， 使 用 caption-side 属性 可 
调整 标题 的 位 置 。 请 看 如 下 的 示例 : 


tablefleftCap( 
border:lpx solid red; 
caption-side:left; 

) 

tablestopCap( 
border:lpx solid red; 
caption-side:top; 

} 

table#rightCap{ 
border:lpx solid red; 
caption-side:right; 

) 

tablefbottomCap( 
border:lpx solid red; 
caption-side:bottom; 


) 


«table id-"leftCap"» 

<caption> 表 格 标题 </caption> 

<tr><td> 使 用 caption-side 可 控制 表格 标题 的 位 置 。</td></tr> 
</table> 
<table id="topCap"> 

<caption> 表 格 标题 </caption> 

<tr><td> 使 用 caption-side 可 控制 表格 标题 的 位 置 。</td></tr> 
«/table» 
«table id-"rightCap"» 

<caption> 表 格 标题 </caption> 

<tr><td> 使 用 caption-side 可 控制 表格 标题 的 位 置 。</td></tr> 
</table> 
«table id="bottomCap"> 

<caption> 表 格 标题 </caption> 

<tr><td> 使 用 caption-side 可 控制 表格 标题 的 位 置 。</td></tr> 
</table> 
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效果 如 图 13-10 所 示 (Firefox 浏览 器 ), 需要 说 明 的 是 , TE 和 Opera 浏览 器 均 不 支持 该 属性 ， 
标题 总 是 位 于 表格 顶部 。 


和 使 用 caption-side 可 控制 表格 标题 的 位 置 。| 
标 
题 

表格 标题 
使 用 caption-side 可 控制 表格 标题 的 位 置 。 
使 用 caption-side 可 控制 表格 标题 的 位 置 。 


标 
题 


[使 用 caption-side 可 控制 表格 标题 的 位 置 。 
FRE 
13-10 caption-side 设置 标题 位 置 (Firefox 浏览 器 ) 


13.3.0 添加 填充 


盒 模型 中 的 padding 属性 同样 可 用 在 表格 上 ， 一 般 在 也 或 td 元 素 中 使 用 。padding 在 这 里 
表示 单元 格 中 的 内 容 与 其 边框 之 间 的 距离 。 

假如 要 给 赛况 表格 中 的 也 和 td 元 素 添加 一 些 填充 ， 则 只 需 添加 如 下 代码 。 

padding:0.4em; 

效果 如 图 13-11 所 示 。 文 字 和 所 在 单元 格 的 边框 之 间 的 距离 变 大 了 。 

近期 赛况 
日 期 球 队 比分 

2007-12-12 | j&3& - ÆA |113 - 108 
2001-12-12 | 猛 龙 - Z | 100 - 88 


E 13-11 添加 padding 属性 
除了 上 述 样式 外 ， 背 景 颜 色 、 文 字 风 格 、 颜 色 等 样式 属性 均 可 应 用 到 表格 中 。 


© 注意 : 正 和 Firefox 浏览 器 对 于 填充 的 显示 效果 不 完全 相同 ， 同 样 的 padding 值 会 在 
Firefox 浏览 器 中 产生 较 多 的 填充 。 如 果 对 页 面 效果 精度 要 求 很 高 的 话 ， 在 设 定 
padding 属性 时 要 注意 兼顾 多 个 浏览 器 的 效果 。 


13.4 表格 大 小 


显示 在 页 面 中 的 表格 呈 和 窍 形 ， 有 自己 的 宽度 和 高 度 。 由 于 表格 内 可 能 会 包含 多 个 单元 格 ， 
每 个 单元 格 又 拥有 边框 、 填 充 等 属性 ， 因 此 宽度 控制 起 来 比较 复杂 。 本 节 将 会 介绍 如 何 控制 表 
格 的 宽度 及 高 度 。 


13.4.1 表格 宽度 计算 方式 


表格 宽度 的 计算 有 两 种 不 同 的 方式 : 固定 宽度 方式 和 自动 宽度 方式 , 而 高 度 只 有 自动 方式 。 


设计 者 使 用 CSS 提供 的 table-layout 属性 来 选择 使 用 哪 种 方式 ， 属 性 值 fxed 和 auto 分 别 表示 
固定 宽度 和 自动 宽度 方式 。 


1. 固定 宽度 方式 
在 固定 宽度 方式 中 ， 宽 度 将 根据 表格 、 列 和 单元 格 的 width 属性 决定 ， 而 不 是 由 单元 格 内 


容 而 定 。 固 定 宽度 方式 依照 如 下 规则 进行 宽度 计算 。 


= 


(1) 任何 设置 了 宽度 值 的 列 元 素 都 将 按照 此 值 确定 宽度 。 
Q) 如 果 某 一 列 的 宽度 设 为 自动 宽度 (这 是 默认 情况 )， 但 该 列 的 第 一 行 单元 格 设置 了 宽度 
则 该 列 按照 此 值 确定 宽度 。 如 果 这 个 单元 格 跨越 多 个 列 ， 则 每 个 列 的 宽度 取 平 均值 。 
(3) 任何 设置 为 自动 宽度 的 列 都 会 自动 设 定 一 个 宽度 值 ， 并 保证 宽度 值 是 平均 分 配 的 。 
请 看 下 面 的 示例 : 
body{ 
font-family:"Arial", "Rý", sans-serif; 
font-size:12px; 
) 
table( 
border:none; 
border-collapse:collapse; 
width:300px; 
) 
thí 
text-align:left; 
background-color:$FFFF66; 
) 
th,td( 
border:none; 
padding:0; 
H 


«table» 
<caption> 我 的 唱片 集 </caption> 
<colgroup> 

<col id="album" /> 
<col id="artist" /> 
<col id="released" /> 
</colgroup> 
<thead> 
<tr> 


CN 


— mu^ 
1 网 页 布局 开发 指南 . 
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<th> 艺 术 家 </th> 
<th> 唱 片 集 </th> 
<th> 年 份 </th> 
</tr> 
</thead> 
<tbody id="chinese"> 
<tr> 
«td» 3 MEE / ca» 
<td> 自 选集 </td> 
<td>2002</td> 
</tr> 
<tr> 
<td> 周 杰 伦 </td> 
<td> 叶 惠美 </td> 
«td»2003«/td» 
</tr> 
</tbody> 
<tbody id="western"> 
«tr» 
«td»Micheal Jackson«/td» 
«td»Invinciblec/td» 
«td»2001«/td» 
</tr> 
<tr> 
<td>Christina Aguilera</td> 
<td>Stripped</td> 
<td>2002</td> 
«/tr» 
«/tbody» 
«/table» 


以 上 代码 产生 的 效果 如 图 13-12 所 示 ， 表 格 宽度 为 300px。 
我 的 唱片 集 


ium En 2002 


周杰伦 叶 惠美 2003 
Micheal Jackson Invincible 2001 
Christina Aguilera Stripped 2002 
— e E 
13-12 ， 设 定 宽度 为 300 个 像素 


若 将 宽度 值 设 为 100px， 则 产生 如 图 13-13 所 示 的 效果 ， 表 格 实际 宽度 要 比 100px 宽 ， 这 


于 默认 情况 下 浏览 器 按 自 动 方式 计算 表格 宽度 , 即 table-layout 属性 值 为 anto, 这 样 每 个 单 


元 格 都 要 完全 显示 其 所 包含 的 内 容 。 


我 的 唱片 集 


E 2002 
Rie HE 2003 
Micheal , 
JETER Invincible2001 
Christina... 

Aquilera Stripped 2002 


«4—— 129px — 


A 13-13 ” 设 定 宽度 为 100 个 像素 ， 但 实际 宽度 要 大 于 此 值 


现在 修改 表格 的 宽度 计算 方式 为 fxed， 表 格 会 严格 按照 宽度 值 进行 计 算 ， 效 果 如 图 13-14 


DIES 


table-layout:fixed; 


Miche; . 
us ckslnvinci2001 


Christ... 
Aguile Stipp2002 


4 100px > 
13-14 ”添加 table-layout:fixed 声明 后 ， 表 格 宽度 会 严格 依照 width 属性 值 
现在 将 表格 宽度 改 回 至 300px， 并 修改 table. th 和 td 元 素 的 border 属性 ， 代 码 如 下 : 


border:lpx solid gray; 


效果 如 图 13-15 所 示 ， 它 与 图 13-12 的 区 别 在 于 ， 设 定 了 固定 宽度 方式 后 ， 由 于 单元 格 没 
有 设置 宽度 值 ， 默 认为 auto。 根 据 规则 3 的 要 求 ， 每 个 单元 格 的 宽度 应 该 相等 ， 即 它们 平均 分 
配 300px 的 宽度 , 因此 每 一 列 的 宽度 均 是 100px. 另外, 添加 边框 之 后 的 表格 宽度 依旧 是 300px， 
边框 的 宽度 不 会 影响 table 元 素 的 width 属性 。 

表格 第 一 列 中 的 内 容 较 多 ， 应 该 设 定 一 个 较 宽 的 宽度 值 ， 年 份 一 列 最 多 只 有 4 位 数字 ， 可 
指定 一 个 较 小 的 宽度 值 。 于 是 添加 如 下 规则 : 

col#album{ 

width:160px; 
} 
col#released{ 


width:40px; 


cM 
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[Micheal Jackson |nvincible 001 


[Christina Aguilera Stripped [2002 
*«—— 100px —>4— 100px —94— 100px —> 
4— — — 300px ————— —— —» 


图 13-15 未 设 定 宽度 值 的 单元 格 会 平均 分 配 表格 宽度 


以 上 规则 利用 col 元 素 设 定 每 个 列 的 宽度 ， 余 下 的 一 列 宽度 会 自动 计算 而 得 ， 应 该 是 
300px-160px-40px=100px， 效 果 如 图 13-16 所 示 。 
我 的 唱片 集 


Micheal Jackson 
[Christina Aguilera 


4— ——— 160px ————4— 100px —> 
— 300px ————————» 


13-16 ”给 col 元 素 设 定 宽度 


最 后 调整 一 下 表格 标题 和 表格 之 间 的 距离 ， 并 给 单元 格 增加 一 些 填充 。 需 要 添加 和 修改 的 
代码 如 下 : 
caption{ 
padding-bottom:5px; 
) 


th,td( 
border:lpx solid gray; 
padding:4px; 

) 


效果 如 图 13-17 所 示 , 我 们 看 到 , 不 论 是 边框 还 是 填充 , 它们 都 不 会 影响 表格 的 最 终 宽度 。 


我 的 唱片 集 
EL 自选 集 2002 
Li 叶 惠美 2003 
Micheal Jackson Invincible 2001 
Christina Aguilera Stripped 2002 


4 — ————— 300px ————————» 


13-17. ”添加 填充 之 后 ， 表 格 宽度 不 发 生 改 变 


2. 自动 宽度 方式 


自动 宽度 方式 是 浏览 器 默认 的 方式 ， 表 格 宽度 将 根据 列 中 单元 格 内 容 自动 调整 宽度 值 。 假 
如 没有 指定 table 元 素 的 宽度 ， 则 总 宽度 依据 每 一 列 设 定 的 宽度 值 或 者 能 显示 所 有 内 容 的 最 小 
宽度 值 计算 确定 。 若 指定 了 table 的 宽度 且 该 宽度 大 于 计算 值 ， 则 每 一 列 会 平均 分 配 赋 予 出 来 
的 宽度 ， 否 则 table 的 宽度 取 计 算 值 。 

我 们 将 上 例 中 的 table-layout 属性 值 改 为 auto, 取消 其 width 属性 ， 再 添加 以 下 代码 设置 第 
二 列 的 宽度 为 60 个 像素 : 

col#artist{ 

width:60px; 
) 


将 会 产生 如 图 13-18 所 示 的 效果 。 
我 的 唱片 集 


HAS 自选 集 2002 
周杰伦 HES 2003 
Micheal Jackson Invincible |2001 
Christina Aguilera Stripped 2002 


4— 288px => 
13-18 ”自动 宽度 计算 方式 


表格 最 后 宽度 是 288px， 然 而 三 列 的 宽度 值 之 和 是 260px， 那 么 多 余 出 来 的 28 个 像素 是 从 
哪里 来 的 呢 ? 实际 上 ， 每 一 列 的 宽度 是 指 的 其 内 容 区 域 的 宽度 ， 不 包括 填充 和 边框 部 分 ， 因 此 
表格 总 体 宽度 应 为 三 列 的 宽度 值 之 和 再 加 上 边框 和 填充 的 宽度 。 这 里 四 条 边框 宽度 值 之 和 为 
4px， 每 个 单元 格 水 平方 向 有 Spx 的 填充 (左右 各 4px)， 三 列 一 共 24px， 所 以 宽度 值 应 为 
260px+4px+24px=288px。 这 就 是 自动 宽度 方式 下 表格 宽度 的 计算 方式 。 


Q 延伸 : 当选 择 自 动 宽度 方式 计算 表格 宽度 时 ， 表 格 显示 的 速度 要 比 固定 方式 慢 , 这 是 由 
于 浏览 器 要 等 到 表格 所 有 内 容 全 部 载 入 之 后 才能 确定 整体 宽度 , 而 且 还 要 加 上 边 
框 、 填 充 部 分 的 宽度 。 假 如 某 一 列 的 宽度 值 为 百分数 ， 则 还 需要 再 次 计算 。 


134.2 高度 


表格 的 高 度 计算 没有 宽度 那么 复杂 ， 如 果 设 定 了 table 的 高 度 值 ， 则 按照 此 值 确 定 高 度 ， 
每 行 的 高 度 根据 自己 的 height 值 确 定 高 度 ， 若 行 高 设置 为 aato， 则 根据 表格 的 高 度 自动 选取 一 
个 值 ， 且 所 有 高 度 为 auto 的 行 的 高 度 一 致 ， 如果 table 的 高 度 值 为 aato， 则 总 高 度 根 据 该 列 的 
所 有 单元 格 的 高 度 值 (设置 了 具体 的 height 值 ) 或 内 容 区 域 的 高 度 (height 值 为 auto) 加 上 边框 、 填 
充 的 大 小 。 另 外 ， 给 高 度 值 设 定 百分数 不 起 任何 作用 。 

假如 在 上 例 中 给 table 元 素 设置 height 值 为 280px， 则 表格 总 高 度 将 是 280px， 各 行 的 高 度 


e 
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都 会 适当 增加 ， 高 度 值 一致 ( 见 图 13-19). 


我 的 唱片 集 


周杰伦 Hgs 2003 


Micheal Jackson Invincible |2001 


Christina Aguilera Stripped |2002 


13-19 设 定 table 元 素 的 高 度 


现在 将 table 的 height 属 性 设 为 auto, 给 也 和 td 元 素 添加 height 属 性 ,并 设 定 其 高 度 为 30px， 
则 表格 总 高 度 将 是 150px+6px+40px=196px( 见 图 13-20)。 


我 的 唱片 集 
pl 自选 集 2002 | 
周杰伦 叶 惠美 2003 196px 
Micheal Jackson Invincible |2001 
Christina Aguilera Stripped |2002 


13-20 设 定 th 和 td 元 素 的 高 度 


135 对 * 


1. 水 平方 向 对 齐 

控制 水 平方 向 对 齐 只 需要 用 text-align 属性 即 可 ， 上 例 中 我 们 就 用 text-align 属性 将 也 元 素 
中 的 内 容 设 定 为 左 对 齐 。 

2. 垂直 方向 对 齐 

要 控制 单元 格 中 的 内 容 在 垂直 方向 的 对 齐 方式 ， 可 以 使 用 vertical-align 属性 ， 前 面 讲 过 ， 
该 属性 可 用 来 控制 文本 的 垂直 对 章 方式 ， 但 是 当 它 用 在 表格 中 时 ， 属 性 值 的 含义 有 所 改变 。 各 
个 属性 值 的 含义 如 表 13-1 所 示 。 


AU 
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表 13-1 vertical-align 属性 值 的 含义 
属性 值 含义 
top 单元 格 中 内 容 与 本 行 顶部 对 齐 
middle 单元 格 中 内 容 与 本 行 中 心 位 置 对 齐 
bottom 单元 格 中 内 容 与 本 行 底部 对 齐 
baseline 单元 格 中 内 容 与 本 行 基线 位 置 对 齐 


sub, super, text-top 和 text-bottom 

请 看 如 下 示例 : 

table( 
width:360px; 
height:200px; 

) 

td( 
border:lpx solid black; 

) 

td#coll{ 
vertical-align: top; 

} 

td#col2{ 
vertical-align:middle; 

} 

td#col3{ 
vertical-align:bottom; 


} 


<table> 
<tr> 


这 些 属性 值 将 被 忽略 ， 不 起 作用 


«td id="col1"> 本 单元 格 内 容 将 与 本 行 的 顶部 对 齐 。</td> 
«td id="col2"> 本 单元 格 内 容 将 与 本 行 中 心 位 置 对 齐 。</td> 
«td id="col3"> 本 单元 格 内 容 将 与 本 行 底部 对 齐 。</td> 


</tr> 
</table> 


效果 如 图 13-21 所 示 。 


床单 元 格 内 容 将 
PENA 


本 单元 格 内 容 将 
与 本 行 中 心 位 置 
Wi. 


本 单元 格 内 容 
| 将 与 本 行 底部 


pF. 


图 13-21 


设置 vertical-align 控制 垂直 对 齐 方式 


[239 EB) 
CPN 
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13.6 表格 实战 


13.6.1 斑马 线 效果 


所 谓 斑马 线 效果 ， 就 是 说 表格 奇数 行 和 偶数 行 采用 不 同 的 样式 ， 在 行 与 行 之 间 形 成 一 种 
替 变 换 的 效果 。 只 需要 给 奇数 和 偶数 行 指定 不 同 的 类 名 ， 再 分 别 设 定 各 自 的 样式 即 可 。 
首先 准备 好 如 下 代码 ， 其 中 包含 表格 的 (X)HTML 代码 和 部 分 样式 代码 ， 在 此 基础 上 添加 


斑马 线 效果 : 


bodyt 
font-family:Tahoma, "R$", sans-serif; 
font-size:12px; 

) 

a img( 
border:0; 

} 

table( 
border:lpx solid #454545; 
border-collapse:collapse; 

} 

caption{ 
padding-bottom:5px; 

) 

thí 
background: £$CCFFFF; 

) 

tdt 
border-top:lpx solid #676767; 
border-bottom:lpx solid #676767; 
padding:4px; 

) 

-leftAligned( 
text-align:left; 

} 

-centerAligned( 
text-align:right; 

} 

col#teams{ 
width:100px; 

} 

col#scores{ 
width:60px; 

} 

col#more, col#video{ 
width:32px; 


图 13-22 表格 初步 样式 效果 
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现在 分 别 给 奇数 和 偶数 行 指定 类 名 ， 在 tr 元 素 分 别 设置 类 名 odd 和 even。 然 后 添加 如 下 
CSS 规则 : 
tr.odd td( 
background: £AEDEFD; 
} 
tr.even td( 
background: #DEF2FE; 
) 


以 上 代码 分 别 给 奇数 行 和 偶数 行 指定 不 同 的 背景 色 ， 效 果 如 图 13-23 所 示 ， 斑 马 线 效果 就 
做 好 了 。 


今日 战报 


13-23 ”斑马 线 效果 


13.6.2 日 历 


日 历 作为 一 种 工具 ， 可 帮助 我 们 安排 各 种 事务 ，Web 页 面 中 也 经 常 出 现 日 历 ， 比 如 在 线 办 
公 系 统 可 以 使 用 日 历 安 排 工 作 内 容 、 博 客 中 的 日 历 可 以 让 我 们 迅速 查看 发 表 于 其 他 时 间 的 文 
章 、 某 赛事 网 站 提供 日 历 以 便 我 们 查看 每 一 天 的 赛程 。 作 为 设计 者 ， 我 们 可 考虑 使 用 table 元 


素 制作 日 历 。 

首先 创建 用 于 表示 日 历 的 COHTML 元 素 ， 设 定 caption 元 素 和 日 历 的 标题 行 ， 并 将 表格 按 
列 划分 成 组 : 

<table> 


«caption»2007 f£ 11 H«/caption» 
Xcolgroup span-"1" class-"weekend"»«/colgroup» 
Xcolgroup span-"5" class-"weekday"»«/colgroup» 
<colgroup span-"1" class-"weekend"»«/colgroup» 
«tr id-"days"» 

«th»H SUN«/th» 

«th»— MON</th> 

<th> 二 TUE</th> 

<th> 三 WED</th> 

<th> 四 THU</th> 

<th> 五 FRI</th> 

<th> 六 SAT</th> 
«/tr» 


接 下 来 创建 表示 日 期 的 单元 格 ， 我 们 以 11 月 1 日 为 例 ， 之 前 不 包含 本 月 日 期 的 单元 格 内 
不 写 任何 代码 : 


iv clas 


td 元 素 内 包含 两 个 div 元 素 ， 分 别 用 于 显示 日 期 和 备 忘 信息 ， 其 他 单元 格 均 照 此 创建 。 余 
下 的 代码 为 (中 间 省 略 了 重复 的 代码 ): 


效果 如 图 13-24 所 示 。 
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2007 年 11 月 
H SUN — HONZ TUE = WED 四 THU 五 FRI 六 SAT 
] 小 光 节 zt- stu 
HE SHA stt THA sx =+ 10A 
了 大 光 节 12 初 三 13 初 四 14 初 五 15087A 15 初 七 17 初 八 
18 初 九 ”19 补 十 20 十 一 31 十 二 221— 29/8 24 十 五 
BFA 26 十 七 27 十 八 28 十 九 29848 15 sott — 


图 13-24 未 添加 CSS 的 日 历 


COHTML 代码 已 经 准备 好 ， 可 以 添加 样式 了 。 设 定 表格 宽度 为 777 个 像素 ， 边 框 模式 选 
为 collapsed， 宽 度 计 算 方式 为 fixed， 再 添加 边框 、 设 定 字 体 大 小 : 


table( 
width:777px; 
border-collapse:collapse; 
font-size:12px; 
border:lpx solid gray; 
table-layout:fixed; 

) 

下 面 设置 caption 元 素 ， 增 大 字号 ， 更 改 字 体 并 设置 一 定量 的 底部 填充 ， 避 免 标题 和 表格 

之 间距 离 过 近 : 

caption{ 
font-size:20px; 
font-family:Georgia, sans-serif; 
padding-bottom: 6px; 

} 


接 下 来 设 定 th 和 td 元 素 样式 。 我 们 给 表 头 指定 了 背景 色 ， 让 它 与 其 余 单元 格 区 分 开 来 。 
td 的 高 度 为 110px， 其 中 内 容 采取 项 部 对 齐 : 


thí 
font-family:Tahoma, "R$", sans-serif; 
background: #FFF49B; 
padding:3px; 


height:110px; 

vertical-align:top; 

padding:0 0 0 3px; 

border:lpx solid gray; 
} 


周末 和 平日 要 做 区 分 ， 通 过 colgroup 元 素 选择 出 表示 周末 的 列 ， 并 设置 其 背景 色 : 


colgroup.weekend{ 
background:£$FFElDE; 


} 
现在 确定 每 个 单元 格 内 公历 和 农历 日 期 该 如 何 显示 。 由 COHITML 代码 可 知 ， 公 历 日 期 放 
在 链接 中 ， 表 明 可 以 点 击 查看 当天 安排 的 详细 情况 ， 而 农历 日 期 只 起 辅助 作用 ， 因 此 应 把 公历 


日 期 的 文字 放大 六 


div.date af 
width:2 
display 
float:l 
font-si 


8px; 
iblock; 
eft; 
ze:22px; 


font-family:Georgia, sans-serif; 
text-decoration:none; 


) 

div.date span( 
color:gray; 
float:left; 


padding-top:8px; 


5 


设置 农历 日 期 文字 颜色 为 灰色 。 具 体 样式 代码 如 下 : 


样式 添加 得 差不多 了 ， 可 以 预览 一 下 效果 ， 如 图 13-25 所 示 。 


20075118 
B swn — MON TUE 三 WED 四 THU 五 FRI 六 SAT 
1 ^** 2 = 3 sm 
4 "n 5 ^ 6 tt 7 "^ 8 vs 9 zt 10 +A 
11 4%% 12 €z 13 om 14 "à 15 0A 16 0t 17 9 
18 mh 19 »* 20+- 21 += 22+= 23428 245 
254^ 265 27*^ 28+ 29537 30*— 


div.memo( 


clear:both; 
margin-top:5px; 


13-25 ”添加 样式 后 的 日 历 


日 历 还 应 该 有 突出 显示 当天 日 期 的 功能 ， 假 如 今天 是 11 月 
增加 一 个 id 属性 ， 属 性 值 为 today。 最 后 在 
memo 的 div 元 素 中 ， 再 给 该 div 添加 样式 ， 需 要 添加 和 修改 的 代码 如 下 : 


ce 


8 日 ， 我 们 给 8 日 那 一 格 的 td 
E 一 些 单元 格 中 填写 一 些 内 容 ， 这 些 内 容 放 在 


E 类 名 为 


s 
N 
a 


—Y 
网 页 布局 开发 指南 


246 


GRE 


td#today{ 
border:2px 


«td» 
«di 


solid black; 


v class-"date"» 
«a href-"14.html"»14«/a»«span»T]fi«/span» 


«/div» 


«di 
«/td» 


«td» 
«di 


«/d. 
«di 
«/td» 
«td» 
«/td» 
</tr> 
</table> 


v class="memo"> 朋 友 生 日 </div> 


V class="date"> 

<a href-"30.html"»30«/a»«span»1t—«/span» 
iv» 

v class-"memo"»18:00 同学 聚会 </div> 


最 终 效果 如 图 13-26 所 示 。 


2007 年 11 月 
[asm Mn cw awo Mm OAN SAr | 
1 x 2 uu 3 sm 
PECET UR. 
4 Um 5 六 6 tt 7 "^ 9 =+ 10 +E 
mra 
E 12 = 13 om 14 证 15 YA 16 95 17 ™ 
朋友 生日 
18 ma 19 0+ 20+- pal 22-5 2948 24+ 
REHERA 
25t% 26+t 27 + 人 28+ 刀 29585 30- 
1800 RE 
13-26 日 历 最 终 效果 
读者 可 继续 完善 此 日 历 ， 也 可 根据 需要 修改 CSS 代码 。 另 一 种 常见 的 日 历 是 微缩 型 的 ， 


尺寸 较 小 ， 只 有 简单 的 日 期 显示 ( 见 图 13-27)， 有 兴趣 的 读者 可 自行 编写 CSS 代码 实现 。 


图 13-27 微缩 型 日 历 


© 注意 : table-layout 属性 设 为 fixed 后 ， 只 有 表格 宽度 是 固定 不 变 的 。 如 果 单元 格 内 文字 
内 容 过 多 ， 表 格 会 通过 增加 高 度 来 容纳 多 余 的 内 容 ， 即 使 在 table 或 td 上 设置 了 
固定 高 度 也 如 此 。 一 种 在 Firefox 浏 览 器 中 可 行 的 解决 办 法 是 增加 一 个 tbody 元 素 ， 
给 该 元 素 设置 固定 高 度 并 将 属性 overflow 设 为 hidden, 但 它 在 IE 中 并 不 起 作用 。 
通用 的 办 法 是 在 单元 格 内 再 添加 一 个 div 元 素 ， 用 来 对 多 余 的 内 容 进行 剪裁 。 


13.7. 5. 结 


本 章 讲 解 了 如 何 正 确 使 用 表格 元 素 , 并 讲解 了 与 表格 相关 的 各 种 (CX)HTML 标记 和 常用 的 样 
式 属性 。 

表格 一 般 用 来 存放 那些 适 于 表格 化 显示 的 数据 ， 而 不 是 作为 一 种 布局 工具 。 

与 表格 相关 的 (X)HTML 元 素 包 括 table、colgroup、col、tr、th、td、caption、thead、tbody 
和 tfoot。 

几乎 任何 CSS 属性 都 可 以 应 用 于 表格 元 素 ， 其 中 边框 属性 比较 重要 ，CSS 提供 了 两 个 边 
框 模式 :分离 模 式 和 塌陷 模式 。 可 通过 border-collapse 属性 来 设置 。 

表格 宽度 计算 方式 分 为 固定 宽度 方式 和 自动 宽度 方式 ， 采 用 前 者 的 表格 宽度 固定 ， 不 论 
margin. padding 和 border 的 宽度 是 多 少 ， 表 格 总 体 宽度 值 不 变 ， 采 用 后 者 的 表格 宽度 依据 单 
元 格 内容 的 多 少 而 定 ， 宽 度 的 计算 速度 比 前 者 慢 。 

通过 给 colgroup 和 col 元 素 添加 样式 可 实现 按 列 控制 表格 样式 。 通 过 调整 单元 格 的 text-align 
和 vertical-align 属性 可 以 改变 单元 格 中 内 容 水 平和 垂直 方向 的 对 齐 方式 。 

下 一 章 将 介绍 如 何 利 用 CSS 控制 CO)HTML 中 表单 元 素 的 样式 。 


e 


第 14 章 表 单 


表单 使 用 户 与 Web 页 面 进行 交互 成 为 可 能 ， 通 过 各 种 表单 元 素 ， 用 户 可 以 方便 地 向 Web 
服务 器 提交 数据 ， 服 务 器 会 根据 这 些 数据 完成 不 同 的 功能 并 通过 页 面 表现 出 来 。 本 章 将 介绍 
COHTML 中 表单 元 素 的 使 用 以 及 如 何 提高 它们 的 易 用 性 ， 如 何 使 用 CSS 美化 表单 以 及 如 何 对 
其 进行 组 织 、 安 排 。 最 后 将 在 实例 部 分 介绍 一 个 用 户 注册 表单 的 设计 过 程 。 

本 章 主 要 内 容 

基本 表单 元 素 

o ”如何 提高 表单 元 素 的 访问 性 

”如何 给 表单 元 素 添加 样式 


14.1 表单 概述 


如 今 的 Web 站 点 不 再 仅仅 提供 一 些 静 态 信 息 了 ， 它 们 更 像 是 应 用 程序 ， 可 以 与 用 户 交 互 
从 而 完成 各 种 各 样 的 任务 。 链 接 使 用 户 可 做 出 选择 ， 然 而 表单 可 收集 用 户 信息 ， 使 用 户 可 以 提 
交 更 复杂 的 信息 ， 进 行 更 复杂 的 交互 。 通 过 表单 ， 用 户 可 以 从 网 上 订购 商品 、 搜 索 文 献 、 在 论 
坛 里 发 表 文章 、 写 博客 、 创 建 网 络 相册 。 对 具有 交互 功能 的 网 站 而 言 ， 表 单 是 必 不 可 少 的 。 图 
14-1 展示 的 是 中 国 雅虎 的 用 户 注册 表单 。 
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14-1 ”中国 雅虎 的 用 户 注册 表单 


14.1.1 表单 元 素 


本 小 节 会 介绍 一 些 表单 元 素 的 基本 知识 ， 对 表单 相当 熟悉 的 读者 可 以 跳 过 这 部 分 内 容 ， 阅 
读 下 一 小 节 。 

表单 元 素 是 指 (X)HTML 中 的 form 元 素 ， 该 元 素 中 通常 会 包含 一 些 具 有 交互 功能 的 
COHTML 元 素 ， 比 如 文本 框 、 复 选 框 等 。 这 些 元 素 也 经 常 被 统称 为 表单 元 素 ， 或 称 为 表单 
控件 。 

1. 输入 控件 

表示 输入 控件 的 CX)HTML 元 素 是 input， 通 过 设 定 其 type 属性 可 实现 多 种 类 型 的 控件 : 单 
行文 本 框 、 密 码 文本 框 、 单 选 框 、 复 选 框 和 提交 按钮 等 。type 属性 的 取 值 和 对 应 的 控件 类 型 如 
K 14-1 所 示 。 


表 14-1 input 元 素 的 type 属性 值 及 对 应 控件 


属性 值 控件 说 明 
text 单行 文本 框 ， 可 设置 maxlength 属性 限制 文本 框 字符 的 个 数 
password 密码 框 ， 外 观 同 单行 文本 框 ， 但 输入 的 字符 显示 为 星 号 或 点 号 
Tadio 单 选 框 ，name 属性 相同 的 多 个 单 选 框 之 中 只 能 有 一 个 处 于 选中 状态 
checkbox 复 选 框 
submit 提交 按钮 ， 单 击 此 按钮 后 浏览 器 会 将 form 元 素 中 的 所 有 表单 信息 提交 到 服务 器 端 
reset 重 置 按钮 ， 单 击 此 按钮 后 ， 表 单 信息 会 被 全 部 清空 
button 一 般 按钮 ， 按 钮 的 行为 可 由 脚本 语言 定义 


input 元 素 是 自我 结束 (Self-closed) 的 ， 和 br 元 素 一 样 ， 不 需要 结束 标记 ， 比 如 : 


<input type="text" maxlength-"10" name-"username" id-"username" /> 


2. 下 拉 菜单 
表示 下 拉 菜 单 的 COHTML 元 素 是 select, 菜单 中 的 每 一 个 选项 由 option 元 素 表 示 。 用 户 可 
以 从 下 拉 菜 单 的 多 个 选项 中 进行 选择 。 下 拉 菜 单 平时 只 会 显示 其 中 一 项 的 内 容 ， 其 余 选 项 需要 
用 户 单 击 下 拉 按 钮 才 可 见 。 下 面 是 一 个 下 拉 菜 单 的 示例 ， 它 提供 了 三 个 选项 ; 
<select name-"genre" id="genre"> 
«option value="pop"> 流 行 </option> 
«option value="classical"> 古 典 </option> 
«option value-"jazz"»Hid«/option» 
</select> 
select 元 素 还 有 个 size 属性 ， 其 默认 值 为 1， 即 只 显示 一 个 选项 ， 如 果 给 该 值 设 定 一 个 大 
于 1 的 数 ， 则 select 会 按照 此 值 显示 选项 ， 用 户 单 击 上 下 滚动 按钮 可 看 到 其 他 选项 。 若 select 
元 素 的 multiple 属性 为 “multiple” 时 ， 用 户 可 同时 选择 多 个 选项 。 
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3. 多 行文 本 


多 行文 本 是 由 textarea 元 素 表示 的 ,通过 cols I rows 属性 可 设置 多 行文 本 框 的 宽度 和 高 度 ， 
单位 是 字符 。 如 果 用 户 输入 的 内 容 超出 其 可 见 区 域 ， 则 多 行文 本 框 会 自动 出 现 一 个 滚动 条 。 注 
意 多 行文 本 元 素 不 是 自我 结束 的 ， 需 要 有 结束 标记 。 

4. 辅助 元 素 


辅助 元 素 不 是 用 来 接收 用 户 信息 的 ， 它 们 的 作用 在 于 实现 结构 化 表单 的 显示 、 添 加 语义 化 
说 明 、 提 高 表单 元 素 的 可 访问 性 和 用 户 的 交互 体验 。 

(1) fieldset 元 素 可 将 多 个 input 元 素 划分 成 组 ， 从 逻辑 上 划分 为 不 同 的 区 域 。fieldset 元 素 
在 浏览 器 中 显示 为 矩形 框 。 

(2) legend 元 素 用 来 描述 其 父 元 素 fieldset 的 内 容 ， 通 常 浏览 器 会 在 fieldset 矩形 框 上 的 适 
当 位 置 显示 legend 元 素 中 包含 的 字符 。 

(3) label 元 素 和 input 绑 定 在 一 起 (让 label 元 素 的 for 属性 和 input 元 素 的 id 属性 一 致 , 或 
者 把 input 元 素 放 在 label 元 素 中 )， 当 用 户 点 击 label 元 素 时 ， 相 应 的 input 元 素 也 会 作出 相应 ， 
另外 ， 使 用 屏幕 阅读 器 的 用 户 可 以 方便 地 了 解 输 入 框 要 求 输入 的 是 什么 内 容 。 

除了 以 上 3 个 元 素 外 ， 表 单元 素 的 tabindex 和 accesskey 属性 也 可 用 来 提高 表单 的 可 访问 
性 。tabindex 属性 可 以 让 用 户 使 用 制 表 键 (Tab) 切 换 不 同 输入 控件 的 焦点 。accesskey 属性 可 设置 
快捷 键 ， 当 用 户 敲 击 键盘 上 相应 的 字符 时 ， 控 件 就 会 获得 输入 焦点 。 
© 注意 : 在 下 浏览 器 中 ， 如 果 只 将 input 元素 放置 在 label 元 素 中 ， 二 者 并 不 能 实现 绑 定 ， 

必须 将 label 元 素 的 for 属性 设置 为 input 元 素 的 id 值 。 


14.1.2 ”表单 元 素 的 显示 


表单 在 不 同 浏览 器 中 显示 效果 差异 很 大 ， 在 Windows XP 和 Windows Vista 系统 中 ， 表 单 
元 素 的 显示 还 和 系统 使 用 的 视觉 主题 有 关系 。 
下 面 这 段 (X)HTML 代码 包含 了 常见 的 表单 元 素 : 


<form id="myForm"> 
<fieldset id-"basicInfo"» 
<legend> 基 本 信息 </legend> 
<label for="username"> 用 户 名 </label> 
<input type="text" id="username" maxlength="16" /> 
<label for="password"> 密 码 </label> 
<input type-"password" id-"password" maxlength-"16" /> 
«label for="passwordConfirm"> 确 认 密 码 </label> 
<input type="password" id-"passwordConfirm" maxlength="16" /> 
«/fieldset» 
«fieldset id-"additionalInfo"» 
<legend> 附 加 信息 </legend> 
<span> 性 别 </span> 


<label for-"male"» 
«input type-"radio" name-"gender" value-"male" id-"male" /> 男 
«/label» 
<label for-"female"» 
<input type="radio" name-"gender" value-"female" id-"female" /> 女 
«/label» 
<label for-"selfDescription"» 
个 人 介绍 <textarea id-"selfDescription" cols-"20" rows-"5"»«/textarea» 
«/label» 
<label for-"vocation"» 
从 事 行 业 
<select id-"vocation"» 

<option value="computer"> 计 算 机 </option> 

<option value="construction"> 建 筑 </option> 

«option value="finance"> 人 金融 </option> 

<option value="other"> 其 他 </option> 

«/select» 
«/label» 
«/fieldset» 
«fieldset id-"operation"» 
«input type="submit" value=" 提 交 ” id-"submit" /> 
<input type-"reset" value=" 重 置 " id-"reset" /> 

«/fieldset» 


«/form» 


图 14-2 至 图 14-7 为 不 同 浏览 器 在 不 同系 统 环境 下 默认 的 表单 显示 效果 。 


户 名 | 密码 [ 确认 密码 [ 


到 从 事 行业 [rs s] 


14-2 IE6 在 Windows XP( 经 典 主题 ) 中 的 显示 效果 


一 基本 信息 
用 户 各 [ zn 确认 密码 |[ 
AMES 
性 别 @ 男 C 女 个 人 介绍 | AFTE prn s] 
提交 xxl 


14-3 Firefox 在 Windows XP( 经 典 主题 ) 中 的 显示 效果 
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厂 基本 信息 

用 户 名 [ 密码 | 确认 密码 | 
厂 附加 信息 - 

性 别 口 男 口 女 个 人 刘 绍 因 从事 行业 SERIES 
提交 EE 


14-4 Opera 在 Windows XP 中 的 显示 效果 


基本 信息 
RPR 密码 | arta 

DET 
TERI o 3 O X 个 人 介绍 从 事 行业 | 计算 机 二 
Ea 

14-5 IE 在 Windows XP( 开 启 主题 效果 ) 中 的 显示 效果 

一 基本 信息 

用 户 各 jene LE 
三 附加 信息 

性 别 OB Ok TANAL METL [SER Si] 

(xx) 


14-6 Firefox 在 Windows XP( 开 启 主题 效果 ) 中 的 显示 效果 


基本 信息 

用 户 名 密码 确认 密码 

附加 信息 

性 别 6 男 6 x 个 人 介绍 - MFT HAN ~ 
GE, [重要 ] 


14-7 IE7 在 Windows Vista 中 的 显示 效果 


142 添加 样式 


本 节 将 介绍 如 何 利用 适当 的 CSS 样式 属性 来 改变 浏览 器 默认 的 简陋 的 样式 。 然 后 介绍 一 
些 常 用 的 组 织 表单 元 素 的 方式 ， 即 表单 的 布局 问题 。 
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14.2.1 盒 模 型 相关 属性 


1. border 属性 
盒 模型 相关 属性 经 常用 于 文本 输入 框 , TE 默认 情况 下 产生 一 种 立体 效果 的 输入 框 。 添加 边 
框 属性 就 能 改变 这 种 默认 的 样式 效果 ， 代 码 如 下 : 


input£inputl( 
border:lpx solid red; 
} 
input£input2( 
border:2px dotted #3452DE; 
5 
input£input3( 
border:none; 


) 
«input id-"inputl" type="text" value=" 文 本 框 ” /> 


«input id-"input2" type-"text" value=" 文 本 框 ” /> 
«input id-"input3" type="text" value=" 文 本 框 ” /> 


效果 如 图 14-8 所 示 。 
区 jx 
14-8 添加 border 属性 后 的 效果 


2. padding 属性 
padding 属性 可 以 增加 文本 框 中 的 文字 和 边框 的 距离 ， 比 如 我 们 给 前 两 个 文本 输入 框 添加 
padding 属性 : 


input£inputl( 
border:lpx solid red; 
padding:2px; 

} 

input#input2{ 
border:2px dotted #3452DE; 
padding:4px 8px; 

} 


效果 如 图 14-9 所 示 。 


ZAE 
14-9 添加 padding 属性 后 的 效果 
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È 提示 : ”在 下 浏览 器 中 ，input 元 素 中 的 中 文 文字 距 上 下 边框 之 间 的 填充 并 不 一 致 ， 上 填 
充 略 小 于 下 填充 。 如 果 想 让 上 下 填充 一 致 ， 需 要 在 样式 代码 中 给 上 下 填充 属性 设 


置 不 同 的 属性 值 。 
3. 宽度 和 高 度 


input 的 size 属性 可 设 定 该 元 素 的 宽度 ， 单 位 为 字符 ， 但 是 使 用 CSS 的 width 和 height 属 


性 可 以 更 精确 地 控制 input 元 素 的 尺寸 。 请 看 如 下 代码 : 


input£inputl( 
border:lpx solid red; 
padding:2px; 
height:20px; 
width:100px; 

} 

input#input2{ 


border:2px dotted #3452DE; 
padding:4px 8px; 
height:10px; 
width:6em; 

) 


效果 如 图 14-10 所 示 ， 注 意 文本 框 的 总 宽度 和 高 度 包含 填充 和 边框 。 
pee 7 


14-10 “对 输入 框 添加 width 和 height 属性 


14.2.2 文字 相关 属性 


表单 元 素 中 的 文本 和 其 他 元 素 中 的 文本 一 样 ， 也 可 被 指定 各 种 不 同 的 文本 样式 ， 
例 分 别 给 单行 文本 框 、 提 交 按 钮 和 多 行文 本 框 指定 文字 相关 的 样式 
input#searchContent{ 
font:italic 12px "Times New Roman", "宋体 "，serif; 
color:blue; 
| 
input£submit( 
font:bold 14px "Jk", sans-serif; 
text-decoration:underline; 
H 
textarea( 
font-size:1.5em; 
line-height:2em; 
text-indent:2em; 
} 


下 面 的 示 


«input type="text" name-"searchContent" id-"searchContent" value=" [WAAR 


内 容 ]"/> 
«input type="submit" id-"submit" value=" 搜 索 " /> 
<textarea rows-"5" cols="10"> 这 里 是 多 行文 本 输入 框 </textarea> 


效果 如 图 14-11 所 示 。 


mamng — [mE] | 入 框 E 


图 14-11 给 表单 元 素 指定 文本 相关 的 样式 
14.23 ”背景 和 图 片 


background 属性 也 可 用 于 表单 元 素 , 但 是 各 个 浏览 器 对 于 添加 了 背景 属性 的 表单 的 显示 也 
不 尽 相 同 。 图 14-12 中 由 左 至 右 分 别 为 IE. Firefox 和 Opera 在 Windows XP 下 的 显示 效果 


LI Exo RE 
Mpe TRE S] C Abit ie vase] OE m joie | 
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图 14-12 不 同 浏览 器 对 背景 色 属性 的 显示 效果 (由 左 至 右 依次 为 IE、Firefox 和 Opera) 


ME, 在 表单 含有 背景 色 的 基础 上 添加 背景 图 片 ( 见 图 14-13), 图 片 重复 和 位 置 属性 取 默 认 


值 ， 则 会 产生 如 图 14-14 所 示 的 效果 。 


图 14-13 背景 图 片 
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14-14 不同 浏览 器 对 背景 图 片 属性 的 显示 效果 (由 左 至 右 依次 为 IE、Firefox 和 Opera) 


cM 


| D 
网 页 布局 开发 指南 


在 这 3 款 浏览 器 中 ， 只 有 单行 文本 输入 框 和 多 行文 本 输入 框 效 果 完 全 一 致 ， 如 果 只 设置 背 
景色 或 背景 图 片 ， 则 提交 按钮 的 效果 也 一 致 重 置 按 钮 、 普 通 按钮 也 如 此 )。 因 此 在 给 表单 元 素 
添加 样式 时 需要 考虑 不 同 浏览 器 的 显示 效果 。 


1424 表单 元 素 的 布局 


1. 表格 布局 

读者 可 能 会 有 疑问 : 不 是 说 过 不 推荐 使 用 表格 布局 吗 ? 

实际 上 使 用 CSS 对 表单 元 素 布局 比较 困难 ， 和 需要 花费 大 量 的 时 间 和 精力 才能 做 出 比较 满 
意 的 效果 。 有 兴趣 的 读者 可 以 亲自 试 一 试 。 复 杂 的 表单 符合 表格 化 数据 的 形式 ( 想 想 你 填写 过 
的 申请 表 、 体 检 表 等 ， 它 们 都 是 放置 在 表格 之 中 的 )， 因 此 使 用 表格 来 安排 表单 元 素 是 合理 的 ， 
也 是 最 佳 选择 。 

本 章 的 实战 部 分 将 会 详细 介绍 如 何 使 用 表格 对 表单 元 素 进行 布局 。 

2. 段落 布局 

段落 布局 是 将 表单 元 素 放 在 p 元 素 内 ， 这 种 方式 适合 相对 比较 简单 的 表单 。 使 用 段落 布局 
的 (X)HTML 代码 如 下 : 


<form action="" method="post" id="messageForm"> 
<fieldset> 
<legend> 留 言 簿 </legend> 
<p> 
<label for="name"> 姓 名 </label><br /> 
<input type="text" name="name" id-"name" tabindex-"1l" /> 
</p> 
<p> 
<label for="email"> 电 邮 </label><br /> 
<input type="text" name="email" id="email" tabindex="2" /> 
</p> 
<p> 
«label for="message"> 留 言 内 容 </label><br /? 
X«textarea name-"message" id-"message" rows-"8" cols-"30" tabindex-"3"» 
«/textarea» 
«/p» 
«p» 
«label for="subject"> 你 是 如 何 知道 本 网 站 的 </label><br /> 
<select name="subject" id="subject" tabindex="4"> 
<option value="">-- 请 选择 --</option> 
«option value="Option1"> 友 情 链 接 </option> 
«option value="Option2"> 朋 友 介绍 </option> 
<option value="Option3"> 搜 索引 擎 </option> 
</select> 
</p> 
<p> 


<label for="receive"> 我 愿意 通过 邮件 接收 本 网 站 的 资讯 </label> 


添加 如 下 样式 信息 : 


p:10p: 


以 上 样式 设 定 了 表单 的 整体 宽度 ， 表 单 内 元 素 文字 的 大 小 ， 辅 助 元 素 的 填充 、 背 景 ， 最 后 
设置 了 输入 框 的 宽度 和 边框 样式 ， 效 果 如 图 14-15 所 示 。 
如 果 还 感觉 它 有 些 单调 ， 可 以 给 每 个 p 元 素 增加 背景 色 ， 并 修改 默认 的 margin 属性 : 


效果 如 图 14-16 所 示 。 
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14-16 最终 效果 


14.3 表单 实战 


在 本 节 的 实战 中 ， 我 们 将 完成 一 个 网 站 注册 页 面 的 制作 ， 同 时 介绍 如 何 使 用 表格 来 安排 表 
单元 素 。 通 常 表单 元 素 会 放 在 一 个 两 列 多 行 的 表格 中 ， 第 一 列 是 label 元 素 ， 第 二 列 是 各 种 表 
单 控件 。 

首先 准备 好 (X)HTML 代码 : 

«form action-"" name-"signup" id="signup"> 

«table» 

<col id-"colHeader" /> 
<col id-"colInput" /> 


(0 gu EET. 


<thead> 
<tr><th colspan="2"> 注 册 </th></tr> 
</thead> 
<tbody> 
«tr class-"sectionHeader"»«th colspan="2"> 以 下 内 容 为 必 填 信息 </th></tr> 
<tr> 
<th><label for="username"> 账 号 </label></th> 
«td» 
<input type="text" id-"username" name-"username" size-"16" 
tabindex-"1" /> 
«/td» 
«/tr» 
«tr» 
«th»«label for="password"> 密 码 </label></th> 
«td» 
<input type="password" id-"password" name-"password" size-"16" 
tabindex-"2" /> 
«/td» 
«/tr» 
Cum 
«th»«label for="passwordConfirm"> 密 码 确 认 </label></th> 
«td» 
<input type="password" id-"passwordConfirm" name-"passwordConfirm" 
size-"16" tabindex-"3" /> 
«/td» 
«/tr» 
«tr» 
«th»«label for="email"> 电 子 邮 件 </label></th> 
<td> 
<input type="text" id-"email" name-"email" size-"30" tabindex-"4" /> 
«/td» 
«/tr» 
«/tbody» 
<tbody> 
«tr class-"sectionHeader"»«th colspan="2"> 以 下 内 容 为 选 填 信 息 </td></tr> 
«tr» 
«th»«label for="questionid"> 安 全 提问 </label></th> 
<td> 
<select id="questionid" name="questionid" tabindex="5"> 
<option value="0"> 无 安全 提问 </option> 
«option value="1"> 母 亲 的 名 字 </option> 
«option value="2"> 和 爷爷 的 名 字 </option> 
<option value="3"> 您 所 养 的 宠物 的 名 字 </option> 
<option value="4"> 您 其 中 一 位 老师 的 名 字 </option> 
«option value="5"> 您 个 人 计算 机 的 型 号 </option> 
<option value="6"> 您 最 喜欢 的 餐馆 名 称 </option> 
«option value="7"> 驾 驶 执照 的 最 后 四 位 数字 </option> 
</select> 启用 安全 提问 后 ， 登 录 时 需 填 入 相应 项 目 
</td> 
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</tr> 
«tr» 
«th»«label for-"answer"»[H/É«/label»«/th» 
«td» 
«input type="text" id-"answer" name-"answer" size-"25" tabindex-"6" /> 
«/td» 
</tr> 
<tr> 
«th»«label»ftXl«/1abel»«/th» 
«td» 
<label for-"male"» 
<input type="radio" name-"gender" value-"1" id-"male" 
tabindex-"7" /> 男 
«/label» 
<label for-"female"» 
«input type-"radio" name-"gender" value-"2" id-"female" 
tabindex-"8" /> 女 
</label> 
<label for="keepsec"> 
<input type="radio" name="gender" value="0" id="keepsec" 
checked-"checked" tabindex-"9" /> 保密 
</label> 
«/td» 
</tr> 
<tr> 
<th><label for="birthday"> 生 日 </label></th> 
<td> 


«input type-"text" name-"birthday" id-"birthday" 
value-"0000-00-00" tabindex-"10"/» 
«/td» 
</tr> 
«tr» 
«th»«label for-"qq"»QO«/label»«/th» 
<td><input type="text" name-"qq" id-"qq" tabindex-"1ll" /»«/td» 
</tr> 
<tr> 
<th><label for="msn">MSN</label></th> 
<td><input type="text" name="msn" id="msn" tabindex="12" /></td> 
</tr> 
<tr> 
<th><label for="icq">ICQ</label></th> 
<td><input type="text" name="icq" id="icq" tabindex="13" /></td> 
</tr> 
<tr> 
<th><label for="bio"> 自 我 介绍 </label></th> 
«td» 
X«textarea name-"bio" id-"bio" cols-"40" rows-"5" tabindex-"14"» 
«/textarea» 
«/td» 


</tr> 

<tr> 
<th></th> 
<td> 
<label for="autoSignIn"> 自 动 登录 
<input type-"checkbox" name-"autoSignIn" id-"autoSignIn" tabindex-"15" /> 
«/label» 
«/td» 

«/tr» 

</tbody> 

<tbody> 

«tr» 
«th»«/th» 
«td» 
«input type="submit" value-"i 4" id-"submit" tabindex-"16" /> 
«/td» 

«/tr» 

</tbody> 

</table> 
</form> 


以 上 代码 采用 表格 布局 表单 元 素 ，table 元 素 放 在 form 元 素 之 内 。 表 格 按 行 划分 为 4 ME 
辑 区 域 (用 1 个 thead 元 素 和 3 个 tbody 元 素 区 分 ), 分 别 表示 标题 、 必 填 内 容 、 选 填 内 容 和 提交 。 
表格 第 一 列 使 用 也 元 素 ， 表 明 它 是 右 侧 输入 控件 的 标题 ， 第 二 列 使 用 普通 的 td 元 素 ， 存 放 各 
种 输入 控件 。 好 了 ， 用 表格 布局 的 内 容 就 这 么 多 ， 下 面 该 轮 到 用 CSS 来 美化 这 个 注册 页 面 了 。 
首先 添加 一 些 基本 的 样式 ， 包 括 字体 、 颜 色 、 表 格 的 初步 样式 : 


font:12px Tahoma, Arial, "宋体 "，sans-serif; 
Color:#333; 

) 

formésignup table( 


width:520px; 
table-layout:fixed; 
border-collapse:collapse; 
text-align:left; 
border:lpx solid $666; 


th, td( 
border-bottom:lpx solid #666; 
padding:5px; 


thí 
font-weight:normal; 
H 
col£colHeader( 
width:100px; 
} 


eB 
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以 下 样式 用 来 处 理 表 格 的 标题 和 各 个 逻辑 区 域 的 提示 信息 , 给 它们 添加 不 同 的 背景 色 和 文 


字 颜 色 以 示 区 别 。 代 码 如 下 : 


thead th( 


background-color:$8AA936; 


color:white; 
border-bottom-color: 


ü 
tr.sectionHeader th( 


#425118; 


background-color :#FDFFC7; 


color:#999; 
} 


效果 如 图 14-17 所 示 。 
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14-17. 表单 初步 样式 
继续 给 表单 元 素 添加 样式 : 
input, select{ 
width:160px; 
} 
textarea{ 
width:260px; 


} 
input, textarea{ 
border-width:lpx; 


border-style:solid; 
border-color:$333 #BBB #BBB $333; 
j 
input£male, input£female, inputf&keepsec, inputfautoSignIn, input£submit( 


width:auto; 
border:none; 
d 
效果 如 图 14-18 所 示 。 
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14-18 给 表单 元 素 增加 样式 


在 性 别 一 栏 中 ， 我 们 打算 使 用 图 片 替 换 掉 原来 的 文字 ， 因 为 图 片 比 文字 更 直观 。 为 此 需要 
给 表示 “ 男 ”、“ 女 ”选项 的 label 元 素 添 加 id 属性 ， 以 便 为 其 增加 不 同 的 背景 图 ， 同 时 给 文 
字 增 加 一 个 span 元 素 并 通过 display 属性 将 其 隐藏 .如 果 浏 览 器 不 支持 CSS 或 者 用 户 将 其 禁用 ， 
那么 性 别 选 项 依然 会 显示 “ 男 ”、“ 女 ”二 字 。label 元 素 的 id 分 别 为 IblMale 和 IbIFemale, 
修改 后 的 (X)HTML 部 分 代码 如 下 : 

<label id-"lblMale" for="male"><input type="radio" name-"gender" value-"1" 

id-"male" tabindex-"7" /»«span»Si«/span»«/label» 

<label id-"lblFemale" for-"female"»«input type="radio" name-"gender" value-"2" 

id-"female" tabindex-"8" /><span> 女 </span></label> 

样式 代码 如 下 : 

label#lblMale span, label#lblFemale span(í 

display:none; 


四 
Ld 
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c 


| C) 
网 页 布局 开发 指南 
Ji 


labelf£lblMale[ 
padding-right:1l6px; 
background:url(images/head male.gif) no-repeat right; 
} 
label#lblFemale{ 
padding-right:16px; 
background:url(images/head female.gif) no-repeat right; 


} 
最 后 要 处 理 的 就 是 提交 按钮 了 ， 我 们 同样 给 它 增加 背景 图 片 ， 让 页 面 更 美观 : 


input#submit{ 
background:url(images/btn bg.gif) no-repeat left top; 
width:65px; 
height:27px; 

) 


最 终 效果 如 图 14-19 所 示 。 
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14-19 ”表单 最 终 效果 (表示 性 别 的 图 标 截 取 自 腾讯 的 TM2008) 


这 时 ， 如 果 用 Firefox 浏览 器 打开 此 页 面 ， 会 发 现 性 别 一 栏 中 图 像 项 端 有 一 部 分 不 见 了 。 
而 在 Opera 中 ， 图 像 上 下 各 有 一 小 部 分 也 消失 了 ( 见 图 14-20)。 
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14-20 Firefox(Zz)fn Opera( 右 ) 浏 览 器 中 的 显示 效果 


c 


这 个 问题 的 原因 在 于 , label 元 素 的 高 度 在 这 两 款 浏览 器 中 是 随 着 其 中 的 文字 大 小 变化 而 定 
的 ， 若 font-size 属性 大 于 12px 则 不 会 有 此 问题 (比如 13px， 如 图 14-21 所 示 )。 


cgco8&6es DO8O8GOPE 
图 14-21 将 font-size 属性 设 为 13px 后 ， 问 题 可 以 得 到 解决 ( 左 ; Firefox， 右 : Opera) 


现在 要 求 不 改变 文字 大 小 ， 那 么 可 以 使 用 padding 属性 为 label 添加 一 些 填 充 ， 把 label 的 
空间 扩大 ， 则 可 以 完整 地 显示 出 背景 图 像 。 修 改 之 后 的 Css 代码 如 下 : 
label#lblMale{ 
padding:lpx 16px lpx 0; 
background:url(images/head male.gif) no-repeat right; 
} 
label#lblFemale{ 
padding:lpx 16px lpx 0; 
background:url (images/head female.gif) no-repeat right; 
) 


现在 ， 三 款 浏览 器 都 能 获得 比较 满意 的 显示 效果 了 。 
144 小 结 


表单 的 使 用 使 得 用 户 可 以 与 Web 页 面 进行 复杂 的 交互 ， 本 章 介绍 了 表单 元 素 的 基本 知识 、 
如 何 添加 适当 的 样式 属性 以 及 如 何 对 表单 元 素 进 行 布局 。 

表单 元 素 包 括 各 种 输入 控件 、 菜 单 和 一 些 辅助 性 的 元 素 ， 辅 助 性 元 素 可 以 提高 表单 的 易 用 
性 ， 另 外 表单 元 素 的 tabindex 和 accesskey 属性 也 能 有 效 地 提高 表单 的 可 访问 性 。 

在 未 添加 任何 样式 之 前 ， 表 单元 素 在 不 同 平 台 不 同 浏览 器 上 的 显示 差异 比较 大 ， 虽 然 通过 
CSS 样式 可 以 统一 部 分 样式 ， 但 是 由 于 各 种 浏览 器 对 CSS 的 支持 程度 不 同 ， 要 想 设计 出 效果 
在 各 浏览 器 中 都 完全 相同 的 表单 几乎 是 不 可 能 的 。 我 们 能 做 到 的 只 是 尽量 统一 它们 的 样式 。 

盒 模型 相关 的 属性 、 背 景 和 控制 文字 的 属性 都 可 用 于 表单 元 素 。 表 单元 素 可 以 利用 表格 或 
段落 来 实现 布局 。 

最 后 ， 本 章 实例 部 分 介绍 了 一 个 完整 的 用 户 注册 表单 的 设计 过 程 。 

从 下 一 章 开始 ， 将 进入 本 书 的 第 四 部 分 一 一 CSS 布局 ， 第 15 章 将 介绍 与 布局 紧密 相关 的 
浮动 与 定位 技术 。 


第 四 篇 “CSS 布局 技术 


8 153 浮动 与 定位 


盒 模型 、 浮 动 和 定位 是 CSS 中 三 个 非常 重要 的 概念 。 其 中 浮动 和 定位 这 两 个 概念 是 进行 
CSS 网 页 布局 的 基础 ， 它 们 决定 了 文档 元 素 如 何 布局 ， 以 何 种 方式 显示 在 浏览 器 的 窗口 中 。 

在 以 前 ， 网 页 设计 人 员 使 用 表格 来 进行 网 页 布局 。 如 果 你 以 前 也 用 表格 进行 布局 ， 那 么 抛 
弃 表格 并 通过 Css 控制 布局 可 能 会 使 你 感到 不 适应 。 但 是 当 你 完全 理解 上 述 概念 之 后 ， 使 用 
CSS 布局 将 是 一 件 十 分 轻松 甚至 愉悦 的 事 。 

CSS 定位 可 以 帮助 设计 人 员 精 确 地 确定 (X)HTML 元 素 在 文档 中 的 位 置 。 除 了 控制 元 素 水 
平和 垂直 方向 上 的 位 置 外 ，CSS 还 能 够 设 定 元 素 的 深度 ， 即 元 素 重 登 的 顺序 。 


本 章 主 要 内 容 


什么 是 (X)HTML 文档 流 

float 属性 的 使 用 

clear 属性 的 含义 

如 何 利用 float 属性 进行 页 面 布局 

IE 中 的 浮动 问题 以 及 解决 方案 
position 属性 和 CSS 定位 的 类 型 
什么 是 静态 定位 、 相 对 定位 、 绝 对 定位 和 固定 定位 
left、right、top 和 bottom 属性 的 作用 
如 何 利 用 定位 实现 页 面 布局 

如 何 使 用 z-index 属性 控制 元 素 深度 
visibility 属性 和 元 素 的 可 见 性 


15.1 float 属性 


15.1.1. (X)HTML 文档 流 


前 面 说 过 ，(X)HTML 元 素 可 分 为 两 大 类 : 内 联 元 素 和 块 级 元 素 。 二 者 在 显示 方式 上 是 不 
同 的 。 

内 联 元 素 是 在 水 平方 向 上 一 个 接 一 个 排列 的 ， 元 素 前 后 不 产生 换行 。 元 素 间 的 水 平 间 距 
可 以 通过 水 平方 向 上 的 填充 、 边 框 和 间距 来 控制 。 常 见 的 strong, span 等 就 属于 内 联 元 素 。 需 
要 注意 的 是 ， 竖 直方 向 上 的 填充 、 边 框 和 间距 对 控制 内 联 元 素 的 高 度 是 不 起 作用 的 。 水 平方 


向 的 一 行将 构成 一 个 所 谓 的 “Line Box ”， 这 是 一 个 逻辑 上 的 概念 ，“Line Box ”是 一 个 虚构 
的 矩形 区 域 ， 包 含 了 组 成 该 行 的 所 有 内 联 元 素 ， 其 高 度 等 于 本 行内 所 有 内 联 元 素 中 高 度 值 最 
大 的 那 一 个 。 在 显示 内 联 元 素 时 ， 浏 览 器 会 自动 计算 出 合适 的 高 度 以 便 将 元 素 内 容 完全 显示 
出 来 。 尽管 浏览 器 自动 计算 内 联 元 素 高 度 , 我 们 还 是 可 以 通过 设置 line-height 属性 的 值 来 改变 
元 素 的 高 度 。 

块 级 元 素 是 在 竖 直 方向 上 一 个 接 一 个 排列 的 ， 元 素 前 后 均 产 生 换行 。 竖 直方 向 上 元 素 之 间 
的 距离 可 以 用 上 下 边 距 来 控制 ,注意 紧 直方 向 的 边 距 会 产生 重 登 ， 其 间距 值 取 相 邻 元 素 中 边 距 
值 较 大 的 那 一 个 。 常 见 的 p、div 等 都 是 块 级 元 素 。 这 些 元 素 的 内 容 都 是 以 “ 块 ” 的 形式 显示 
在 浏览 器 中 的 。 

内 联 元 素 和 块 级 元 素 各 自 遵循 着 不 同 的 显示 方式 ， 这 就 构成 了 (X)HTML 的 文档 流 (Flow)。 
文档 的 内 容 被 比喻 为 “ 流 ”。 文 档 中 的 元 素 可 以 “随波逐流 ”， 也 可 以 脱离 “ 流 ”，“ 漂 浮 ” 
在 其 上 。 如 果 你 没有 为 元 素 设 定 附加 的 CSS 属性 ， 那 么 元 素 将 按照 它 在 (X)HTML 代码 中 出 现 
的 顺序 一 个 挨 着 一 个 地 排列 。 

请 看 如 下 代码 : 

div#boxl, div#box2, div#box3{ 

width:80px; 
height:80px; 
border:lpx solid $000; 

) 


«div id="box1"> 块 级 元 素 竖 直 方向 依次 排 开 </div> 
<strong> 内 联 元 素 </strong><span> 水 平方 向 依次 排 开 </span> 
«div id="box2"> 块 级 元 素 竖 直方 向 依次 排 开 </div> 
«div id="box3"> 块 级 元 素 竖 直 方向 依次 排 开 </div> 
<strong> 内 联 元 素 </strong><span> 水 平方 向 依次 排 开 </span> 
<strong> 内 联 元 素 </strong><span> 水 平方 向 依次 排 开 </span> 


为 了 可 以 看 清楚 效果 ， 我 们 为 三 个 div 元 素 设置 了 高 度 、 宽 度 以 及 边框 。 图 15-1 展示 了 代 


码 在 浏览 器 中 的 效果 。 
ES ou 


向 依次 | 
EFF 
p 
EFF 
向 依次 | 
EF 
平方 向 依次 排 开 内 联 元 素 水 平方 向 依次 排 开 


图 15-1 在 默认 的 文档 流 中 ， 块 级 元 素 竖 直 排列 ， 内 联 元 素 水 平 排列 


div 是 块 级 元 素 ，strong 和 span 是 内 联 元 素 。div 元 素 的 前 后 都 有 换行 ， 而 strong 和 span 
元 素 之 间 以 及 span 元 素 之 间 不 产生 换行 。 注 意 最 后 一 个 strong 元 素 与 前 一 个 span 元 素 之 间 存 
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-个 空格 ， 这 是 由 (X)HTML 代码 中 代码 之 间 的 换行 符 导致 的 。 


15.1.2 float 属性 的 作用 


CSS 的 float 属性 可 以 使 元 素 脱离 原始 的 文档 流 ， 使 其 浮动 于 原始 的 文档 流 之 上 。 浮 动 元 
素 会 向 左 或 向 右 靠 在 包含 该 元 素 的 容器 一 边 , 但 它 的 位 置 还 是 基于 正常 的 文档 。 浮 动 元 素 不 再 
占用 原来 的 位 置 ， 因 此 位 于 文档 流 中 的 其 他 元 素 ( 即 未 被 设置 为 浮动 的 元 素 ) 会 填补 该 元 素 原来 
的 位 置 ， 这 些 元 素 中 的 内 容 会 围绕 在 浮动 元 素 周 围 。float 属性 可 用 于 任何 (X)HTML 元 素 。 设 
置 了 浮动 属性 的 元 素 遵循 如 下 规则 : 

o ”浮动 元 素 的 边 距 不 会 产生 重 县 现象 。 

@ ”只 有 元 素 中 的 内 容 会 受到 浮动 元 素 的 影响 。 这 就 是 说 背景 、 边 距 、 边 框 、 填 充 等 盒 模 

型 相关 属性 不 受 影响 。 
o 浮动 元 素 被 视 为 块 级 元 素 ， 元 素 维度 由 边 距 、 边 框 、 填 充 、 高 度 和 宽度 属性 决定 。 
图 15-2 展示 了 一 个 向 左 浮动 的 元 素 和 其 父 元 素 ( 即 容器 ) 的 位 置 关系 , 图 中 浅 灰 色 线条 表示 


父 元 素 中 的 内 容 。 
ibi 
上 边框 
上 填充 
ii 
上 边框 
上 填充 
EEE 右 看 右 
E kkGnG WB 填 边 边 有 右 有 
边 边 填 mex Rem LET 
[fll 下 填充 充 框 中 
下 边框 
下 边 距 
TAA 
Tibi 
下 边 距 


192 ”浮动 元 素 的 盒 模 型 示意 图 


float 属性 值 可 以 是 left, right 和 none. left 表示 元 素 向 左 浮动 ，right 表示 元 素 向 右 浮动 ， 
而 none 表示 元 素 不 浮动 。 
请 看 示例 : 


body( 
border:lpx dashed gray; 
padding:10px; 

H 

div{ 
height:80px; 
width:80px; 
border:lpx solid $000; 


cM 


«div id-"boxl"»boxl«/div» 
«div id-"box2"»box2«/div» 


如 图 15-3 所 示 为 以 上 代码 的 效果 。div 属于 块 级 元 素 ， 在 竖 直 方向 上 进行 排列 。 


15-3 ”未 使 用 float 属性 时 ， 元 素 按照 默认 的 方式 排列 
现在 我 们 给 #box1l 添加 float 属性 ， 让 它 向 右 浮动 。 


diviboxl( 
float:right; 
) 


图 15-4 显示 了 给 #box1l 添加 浮动 属性 之 后 的 效果 ，#box1l 脱离 了 原始 的 文档 流向 右 浮 动 ， 
直到 碰 到 #box1l 的 容器 ， 即 body 元 素 ，#box2 蔡 代 了 原来 #box1 的 位 置 。 图 中 的 箭头 表示 了 元 
素 在 原始 文档 流 中 的 移动 方向 。 


15-4 ”给 #box1 添加 float 属性 ， 使 其 脱离 原始 文档 流向 右 浮动 


现在 我 们 让 #boxl 向 左 浮动 ， 同 时 给 两 个 div 元 素 设置 不 同 的 背景 色 ， 最 后 增加 #box2 的 
宽度 和 高 度 : 

div#box1{ 
float:left; 
background:pink; 

} 

div#box2{ 
background:yellow; 
width:200px; 
height:120px; 

} 


如 图 15-5 所 示 为 Firefox 浏览 器 中 的 显示 效果 。 
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图 15-5 将 box1 向 左 浮动 (Firefox 浏览 器 ) 


当 #box1l 向 左 浮动 后 ,#box2 占据 了 #box1 的 位 置 ,注意 浮动 元 素 只 影响 其 余 元 素 中 的 内 容 ， 
因此 #box2 中 的 文字 没有 被 #box1 所 覆盖 ， 而 是 围绕 在 它 的 旁边 。 注意 E 浏览 器 并 没有 严格 遵 
循 CSS 的 规范 ， 当 元 素 设 定 了 确定 高 度 或 宽度 时 ， 它 将 靠 在 浮动 元 素 旁 边 ， 而 不 会 占据 浮动 
元 素 的 位 置 。 本 例 的 #5box2 就 靠 在 了 #box1 旁边 ， 如 图 15-6 所 示 。 


图 15-6 IE 浏览 器 的 显示 效果 ，#box2 并 没有 占据 #box1 的 位 置 ， 而 是 挨 在 #box1 的 旁边 
如 果 我 们 将 #5box1l 和 #box2 都 向 左 浮动 ， 那 么 它们 会 一 个 挨 着 一 个 浮动 在 浏览 器 窗口 中 : 


div( 
float:left; 
) 


如 图 15-7 Bras 2g YE 浏览 器 的 显示 效果 。 


15-7 #box1 和 #box2 均 向 左 浮动 (IE 浏览 器 ) 


如 图 15-8 所 示 为 Firefox 浏览 器 的 显示 效果 ， 与 IE 不 同 的 是 ，body 元 素 并 没有 随 着 两 个 
div 元 素 的 高 度 而 变化 。 这 是 因为 浮动 的 div 元 素 脱离 了 原始 的 文档 流 ， 也 就 不 再 被 body 元 素 
所 包含 ， 现 在 body 元 素 没有 包含 的 元 素 ， 高 度 也 就 为 0 了。 在 下 一 小 节 我 们 将 介绍 如 何 处 理 
此 种 情况 下 父 元 素 的 高 度 问 题 。 


15-8 Firefox 浏览 器 的 显示 效果 ，body 元 素 的 高 度 没 有 根据 div 元 素 变 化 


当 body 元 素 的 宽度 能 够 容纳 部 oxl 和 #0ox2 时 ， 这 两 个 div 水 平方 向 依次 排 开 。 当 我 们 逐 
步 减 小 浏览 器 窗口 的 宽度 时 , #box2 就 会 被 挤 到 部 oxl 的 下 面 ( 见 图 15-9)。 这 种 情况 被 称 作 浮动 
下 落 (Float Drop)， 在 使 用 浮动 进行 页 面 布局 时 尤其 要 注意 避免 这 种 现象 发 生 。 


i box2 


15-9 ”浏览 器 宽度 缩小 后 #box2 被 挤 到 #box1 的 下 面 


© 注意 : 浮动 只 能 向 左 或 向 右 进行 ， 不 会 浮动 在 中 间 某 个 位 置 ， 读 者 在 刚 接触 浮动 概念 时 
需要 注意 。 


15.2 clear 属性 


前 面 讲 过 ， 浮 动 元 素 会 影响 位 于 正常 文档 流 中 的 元 素 内 容 排列 ， 使 内 容 围绕 在 浮动 元 素 的 
周围 。 在 第 11 章 中 ， 我 们 曾经 利用 float 属性 进行 图 文 混 排 ， 使 图 片 向 左 或 向 右 浮 动 ， 这 时 文 
字 就 会 围绕 在 图 片 的 周围 。 再 举 个 例子 : 

body( 

font-family:"Times New Roman", "宋体 "，serif; 


) 

div#wrapper{ 
width:540px; 
border:lpx solid gray; 
padding:0 10px; 


pt 
text-indent:2em; 
margin:lOpx 0; 
line-height:1.3em; 

H 

-floatLeft( 
float:left; 

ly 

img#flower{ 
margin:lO0px 10px 10px 0; 

} 


<div id="wrapper"> 
<img class="floatLeft" id="flower" src="images/flower.jpg" alt="flower" /> 
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«p idq="paral"> 火 稚 原 产 于 南美 洲 热带 雨林 中 ， 属 热带 性 植物 ， 多 年 生 草本 。 其 花 呈 腥 红 色 ， 
肉 穗 状 花 序 向 外 倾斜 ， 上端 黄色 ， 下 端 白色 。 整 个 花 像 一 只 伸展 的 红色 手掌 ， 掌 心 竖 起 一 条 弯曲 的 金黄 
色 肉 穗 ， 仿 佛 又 像 是 鹤 的 颈项 。</P> 

<p idq="para2"> 火 稚 又 名 红 掌 、 花 烛 、 安 祖 花 、 烛 人 台 花 。 其 英文 名 称 为 anthurium， 由 前 组 
anthos (4E) 和 oura ( 尾 ) 组 成 。 火 稚 的 肉 穗花 序 就 如 同一 条 尾巴 ， 因 此 得 名 。</p> 


</div> 
以 上 代码 将 产生 如 图 15-10 所 示 的 效果 ，#paral 和 #para2 内 的 文字 都 会 围绕 在 浮动 的 img 
元 素 的 周围 。 


火 裤 原 产 于 南美 洲 热带 雨林 中 ， 属 热带 性 
AH, SFEER. HEETE, AERE 
序 向 外 倾斜， 上 端 黄色 ， 下 端 白色 。 整 个 花 像 
一 只 伸展 的 红色 手掌 ， 掌 心 竖 起 一 条 弯曲 的 金 
deni, OSEE. 

KENZIE. d. FAT. Mdb. 

其 英文 名 称 为 anthuriam， 由 前 缀 anthos (E) 和 
oua (Œ) 组 成 。 火 的 的 内 穗花 序 就 如 同一 条 尾巴 ， 因 此 得 名 。 


15-10 p 元素 的 文字 都 会 围绕 在 浮动 的 img 元 素 周围 


CSS 的 clear 属性 可 以 禁止 这 种 情况 发 生 ， 使 文字 不 会 环绕 在 这 个 浮动 元 素 周围 。clear 属 
性 值 可 以 为 left、right、both 和 none. left 表示 元 素 内 容 不 会 围绕 在 向 左 浮动 的 元 素 周围 ，right 
表示 元 素 内 容 不 会 围绕 在 向 右 浮动 的 元 素 周围 , both 相当 于 同时 使 用 left 和 right, none 则 表示 
元 素 内 容 总 产生 围绕 效果 。 

现在 给 四 ara2 添加 如 下 样式 规则 : 

p#para2{ 

clear:left; 

) 

#para2 中 的 文字 不 会 围绕 在 img 元 素 周 围 ， 它 按照 块 级 元 素 的 显示 规则 ， 在 图 像 后 面 男 起 
新 的 一 行 显示 ( 见 图 15-11)。 


火 扑 原 产 于 南美 洲 热 带 雨 林 中 ， 属 热带 性 
植物 ， 多 年 生 草 本 。 其 花 呈 胆 红 色 ， 肉 穗 状 花 
FAMEN, LARE, PHASE. ST COR 
一 只 伸展 的 红色 手掌 ， 掌 心 竖 起 一 条 弯曲 的 金 
黄色 肉 穗 ， 仿 佛 又 像 是 锥 的 颈项 。 


火 笨 又 名 红 掌 、 花 业 、 安 祖 花 、 烛 台 花 。 其 英文 名 称 为 anthurium， 由 前 缀 
CE ED R A ORE ND M 


15-11 元 ara2 使 用 clear 属性 后 ， 其 内 容 不 再 围绕 浮动 元 素 


现在 若 将 元 ara2 从 (X)HTML 文档 中 除去 , 则 Firefox 浏览 器 会 产生 如 图 15-12 所 示 的 效果 。 

前 面 说 过 ， 容 器 不 会 将 浮动 元 素 包含 在 内 ， 因 此 div 元 素 的 高 度 只 根据 其 中 的 文字 内 容 而 
定 ， 所 以 出 现 了 如 图 15-12 所 示 的 效果 ， 图 像 越 出 了 div 元 素 的 下 边界 。 我们 可 以 使 用 clear 属 
性 来 解决 这 个 问题 。 


火 铂 原 产 于 南美 洲 热带 雨林 中 ， 属 热带 性 
AH, SFERE. HERRIE, AERE 
序 向 外 倾斜， LRE, PES. ETUR 
一 只 伸展 的 红色 手掌 ， 掌 心 竖 起 一 条 弯曲 的 金 
黄色 内 穗 ， 仿 佛 又 像 是 鹤 的 颈项 。 


A 15-12 将 #para2 去 掉 后 ，Firefox 浏览 器 的 显示 效果 
现在 在 #paral 后 面 添加 一 个 div 元 素 ， 设 置 其 class 属性 为 clear: 
«p id="paral"> 火 稚 原 . . .</p> 
«div class-"clear"»«/div» 


再 给 .clear 添加 如 下 样式 规则 ; 


.Clearf 
clear:both; 


H 
效果 如 图 15-13 Pros. fwrapper 的 下 边界 能 够 将 图 像 包 含 在 内 了 。 


火 鹤 原 产 于 南美 洲 热 带 雨 林 中 ， 属 热带 性 
Ah, SFERE., HEETE, ARRE 
FAMIN, LG. TRAE. EMER 
—RHRISIGTX, X08 Tute 
emm, 8mm. 


15-13 使 用 clear 解决 容器 无 法 包含 浮动 元 素 问 题 


我 们 添加 了 一 个 空 的 div 元 素 , 并 给 它 添加 了 clear 属性 。 图 15-14 展示 了 添加 该 元 素 所 起 
到 的 作用 。 


ia 添加 clear 属 性 的 空 div 元 素 


15-14 添加 clear 属性 的 空 div 元 素 的 作用 
从 图 15-14 看 出 ， 这 个 空 元 素 将 #wrapper 的 高 度 强制 拉 伸 至 图 像 的 高 度 。 


[À 提示 :， 严格 地 讲 ， 第 11 章 中 介绍 的 图 文 混 排 范例 的 健壮 性 不 够 高 ， 如 果 最 后 一 段 文字 
内 容 较 少 ， 则 会 产生 类 似 图 15-12 所 示 的 效果 。 为 了 避免 这 一 现象 的 发 生 ， 就 要 
添加 额外 的 元 素 ， 并 为 其 设 定 clear 属性 。 
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15.3 ”使 用 float 属 性 布局 页 面 


使 用 float 属性 除了 能 进行 图 文 混 排 外 ， 还 可 以 对 页 面 进 行 整体 布局 ， 安 排 页 面 各 个 逻辑 区 
域 的 位 置 。 栏 式 结构 是 网 页 布局 排版 的 基础 结构 ， 即 采用 竖 分 方式 将 页 面 上 不 同 的 逻辑 区 域 分 
成 若干 列 。 例 如 Theologisches Seminar Elstal 网 站 就 采用 了 左右 两 栏 的 分 栏 式 布局 ( 见 图 15-15)。 
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* akademischen Standard und gute Praxisorientierung genießen, 
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3 Predigt über Epheser 4,11-16 
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Nachrichten und Berichte 


Mehr als 80 Theologinnen und Theologen, Studierende und Interessierte 
nahmen vom 1. bis 3. November an dem Symposium "Der historische 
Jesus im Spannungsfeld von Glaube und Geschichte" teil. Die Aktualität des Themas wurde 


nicht nur durch die Veróffentlichung des Jesus-Buches von Papst Benedikt XVI. deutlich. 
meha 


10.10.2007 

Eröffnung des Wintersemester 2007/2008 

Die Eröffnung des Wintersemesters 2007/2008 fiel mit dem Festakt "10 
Jahre Bildungszentrum Elstal" zusammen. Aus diesem Anlass hielt Dr. 


Johann Komusiewicz (Staatsekretár im Ministerium für Wissenschaft, 
Forschung und Kultur des Landes Brandenburg) den Festvortrag zum Verhältnis von Staat 
und Kirche. AuGerdem wurden die neuen Studierenden und zwei neue Professoren begrüBt. 


15-15 Theologisches Seminar Elstal 网 站 采用 了 左右 分 栏 的 布局 


又 如 Control C 网 站 采用 了 左 中 右 三 栏 式 的 布局 ( 见 图 15-16)。 
- 般 实 现 页 面 分 栏 式 布局 需要 以 下 3 个 步骤 来 完成 。 


(1) 划分 逻辑 区 域 
区 域 的 内 容 放 置 在 单独 的 div 元 素 中 , 并 设 定好 id 属性 ( 见 图 15-17 的 第 一 
行 左 侧 第 一 幅 示 意图 )。 


首先 将 页 面 不 同 


Q) 使 侧 栏 浮动 


根据 需要 可 给 侧 栏 添加 float 属性 ， 使 其 向 左 或 向 右 浮动 。 注 意 一 点 ， 在 (X)HTML 文档 中 


如 


第 15 章 austro 


须 出 现在 围绕 它 的 元 素 之 前 。 最 后 给 侧 栏 设 定 一 定 的 宽度 值 。 
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15-16 Control C 网 站 采用 了 三 栏 式 的 页 面 布局 


G) 处 理 其 余 栏 

对 于 其 他 栏 ， 可 继续 添加 float 属性 使 其 浮动 ， 或 者 设 定 一 定 的 边 距 ， 把 覆盖 在 浮动 元 素 
之 下 的 部 分 显示 出 来 。 

假如 页 面 采 用 二 分 栏 ， 左 栏 向 左 浮动 ， 宽 度 为 200px。 则 第 二 栏 会 占据 左 栏 原 来 的 位 置 ， 
且 有 一 部 分 盖 在 左 栏 的 下 面 ， 这 时 可 设 定 它 的 left-margin 属性 为 210px， 这 样 第 二 栏 和 左边 这 

- 栏 就 会 相隔 10px。 或 者 让 第 二 栏 也 向 左 浮动 并 设置 其 左边 距 为 10px， 效 果 是 一 样 的 。 

图 15-17 展示 了 使 用 float 属性 进行 分 栏 的 原理 。 

本 书 的 第 16 章 将 向 读者 介绍 若干 常见 的 页 面 布局 形式 和 实现 方式 ， 那 时 我 们 再 通过 具体 
的 代码 来 展示 布局 技术 。 


e5] 
网 页 布局 开发 指南 
顶端 
侧 栏 
主要 内 容 


15-17 使 用 float 属性 实现 页 面 分 栏 的 原理 示意 图 


15.4 IE 的 浮动 问题 


Windows 平台 下 的 IE 浏览 器 存在 许 许 多 多 的 问题 ， 与 浮动 相关 的 问题 也 不 少 ， 它 直接 影 
响 页 面 布局 的 效果 ， 如 果 不 加 以 解决 ， 会 导致 页 面 效果 混乱 不 堪 。 


15.4.1 边 距 加 们 问题 


1. 问题 描述 及 现象 
IE6 以 及 之 前 的 版 本 存在 边 距 加 倍 问题 (Double-margin Bug)。 该 问题 的 表现 是 ， 当 元 素 向 
左 或 向 右 浮动 时 ， 元 素 的 左边 距 或 右边 距 的 大 小 会 被 加 倍 。 请 看 下 面 的 示例 : 


body( 
margin:0; 

} 

div( 
background: yellow; 
border:lpx solid gray; 
height:100px; 
width:100px; 
margin-top:l0px; 


div#boxl{ 
margin-left:50px; 
float:left; 

n 

div#box2{ 
margin-right:50px; 
float:right; 

} 


«div id="boxl"></div> 

«div id="box2"></div> 

我 们 准备 两 个 div 元 素 ， 使 它们 分 别 向 左 和 向 右 浮动 ， 并 设置 50px 的 左边 距 和 右边 距 。 
通过 对 比 Firefox( 图 15-18 上 ) 和 正 6( 图 15-18 下 ) 的 显示 效果 可 以 发 现 ，IE6 中 元 素 的 边 距 被 加 
倍 了 。 
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15-18 IE6 的 边 距 加 们 问题 


2. 问题 解决 方案 
该 问题 解决 起 来 也 很 简单 一 一 只 需要 给 浮动 元 素 添加 声明 display:inline 即 可 : 


div#boxl, div#box2{ 
display:inline; 


} 


15.4.2 3px 间隔 问题 


1. 问题 描述 及 现象 

浮动 元 素 会 影响 位 于 文档 流 之 中 元 素 的 内 容 ， 使 它们 围绕 在 自身 周围 。 但 是 在 IE6 中 ， 浮 
动 元 素 与 周围 的 内 容 之 间 会 自动 多 产生 3px 的 距离 ， 故 称 作 3px 间隔 (Three-pixel Gap) 问 题 或 
3px 位 移 (Three-pixel Jog) 问 题 。 


teg 
~ 
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请 看 示例 : 


div#boxl{ 
float:left; 
height:100px; 
width:100px; 
background: yellow; 
border:lpx solid gray; 

i 

div#box2{ 
margin-left:120px; 
border:lpx solid gray; 

) 


«div id-"box1"»«/div» 
<p> 测 试 文本 </p> 
<p> 测 试 文本 </p> 
<div id="box2"> 
测试 文本 <br /> 
测试 文本 <br /> 
测试 文本 <br /> 
测试 文本 
</div> 
代码 创建 了 一 个 向 左 浮动 的 #box1， 接 着 添加 了 两 个 p 元 素 和 一 个 div 元 素 ， 元 素 中 包含 
- 些 文本 。 我 们 给 div 元 素 设 置 了 左边 距 ， 可 以 让 读者 更 清楚 地 看 到 问题 所 在 。 图 15-19 展示 
T IE6( 上 ) 和 Firefox( 下 ) 浏 览 器 各 自 的 显示 效果 。 


测试 文本 


测试 文本 y ylh 
j m 
E DESCR 
文本 


Afi SC 
则 试 文本 


| 试 文本 
jur d Sm rem 
测试 文本 


图 15-19 3px 间隔 问题 ，IE6( 上 ) 中 部 分 文本 向 右 移动 了 3px，Firefox( 下 ) 中 没有 此 问题 


可 以 看 出 , 在 浮动 div WAM, p 元 素 以 及 div 元 素 中 的 文本 与 该 浮动 div 之 间 存 在 一 定 的 
间隔 ， 这 个 间隔 恰好 是 3px。 而 浮动 div 右 下 方 的 两 行文 本 则 没有 这 3px 间隔 。 相 当 于 浮动 元 
素 将 右 侧 的 元 素 挤 出 了 3px 的 空间 。 


cM 


2. 问题 解决 方案 


针对 3px 问题 ,我 们 可 通过 条 件 注释 添加 正 6 专 用 的 样式 ,将 浮动 元 素 右 侧 的 边 距 减少 3px， 
可 以 使 p 元 素 文字 向 左 移动 3px， 给 div 元 素 添加 heightlpx， 使 其 内 部 文本 左 端 对 齐 ， 但 是 这 
样 做 会 使 整个 div 元 素 中 的 内 容 全 部 增加 3px 的 位 移 ， 我 们 再 将 它 的 左边 距 减 少 3px， 这 样 页 
面 效果 就 和 其 余 浏 览 器 一 致 了 。 比 如 给 部 ox1l 添加 如 下 声明 : 


<!-- 针对 IE6 的 3px 间隔 问题 进行 修正 --> 
< [if TE 6]> 
<style type="text/css"> 
div#boxl1{ 
margin-right:-3px; /* 减少 浮动 元 素 的 边 距 , 0 - 3 = -3 */ 
H 
div#box2{ 
height:lpx; /* ff div 元 素 内 文本 左 端 对 齐 */ 
margin-left:ll7px; /* 向 左 移动 div 元 素 , 120 - 3 = 117 */ 
} 
</style> 
<! [endif]--> 


È 提示 : ”对 于 一 般 的 图 文 混 排 ，3px 不 会 对 页 面 效果 产生 很 大 的 影响 ， 是 可 以 接受 的 。 这 
时 没有 必要 添加 额外 代码 对 IE6 进行 单独 处 理 。 假 如 浮动 用 于 页 面 布局 ， 且 精度 
要 求 达 到 了 像素 级 别 ， 那 么 再 考虑 解决 3px 间隔 问题 。 


154.3 ”捉迷藏 问题 


1. 问题 描述 及 现象 
捉迷藏 问题 (Peek-a-boo Bug) 在 很 多 情况 下 都 会 发 生 ， 尤 其 是 当 利用 浮动 进行 页 面 布局 时 ， 
div 元 素 中 内 容 会 不 可 见 。 请 看 示例 : 


div#wrapper{ 
background: #DDD; 

} 

div#sidebar{ 
float:left; 
border:lpx solid gray; 
width:100px; 
height:150px; 
padding:10px; 

} 

divimain( 
border:lpx solid gray; 

b 

divi£hack( 
clear:both; 


$ 
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«div id-"wrapper"» 
«div id-"sidebar"» 
文本 «a href="#"> 链 接 </a> 
</div> 
«div id-"main"» 
文本 <br /> 
文本 <a href="#"> 链 接 </a><br /> 
文本 <a href="#"> 链 接 </a> 
<div> 文 本 <a href="#"> 链 接 </a></div> 
«/div» 
«div id="hack"> 清 除 </div> 
«/div» 


在 IE6 中 打开 该 页 面 可 以 发 现 ，#main 竟然 消失 了 。 当 用 鼠标 选择 该 区 域 时 ， 才 能 显示 出 
其 中 内 容 ， 如 图 15-20 所 示 。 


文本 链接 TRUE gus 


图 15-20 ”捉迷藏 问题 ，IE6 没有 显示 右 侧 的 元 素 ( 左 图 )， 当 用 鼠标 选择 该 区 域 时 ， 元 素 即 刻 显示 出 来 ( 右 图 ) 
捉迷藏 问题 产生 的 原因 包含 以 下 几 个 方面 : 
e ”有 浮动 的 元 素 存在 。 
e 容器 有 背景 色 。 
e ”有 清除 浮动 影响 的 元 素 存在 。 
o 浮动 元 素 周围 的 元 素 没有 设置 确切 的 高 度 和 宽度 值 。 
上 述 所 有 因素 导致 了 IE6 不 能 正确 显示 元 素 内 容 。 
2. 问题 解决 方案 
捉迷藏 问题 的 解决 办 法 也 有 很 多 : 
e 给 容器 元 素 和 浮动 元 素 同 时 添加 声明 一 一 position: relative; 
给 容器 元 素 添加 声明 一 一 zoom:1; 
给 容器 元 素 添加 声明 一 一 display:inline-block; 
给 容器 元 素 或 无 法 显示 的 元 素 指 定 宽度 或 高 度 值 。 


154.4 断头台 问题 


1. 问题 描述 及 现象 
断头台 问题 (Guillotine Bug) 的 名 字 起 的 很 形象 ， 当 问题 发 生 时 ， 元 素 就 如 同上 了 断头台 一 
样 ， 其 中 的 一 部 分 内 容 会 被 砍 掉 。 


请 看 示例 : 


div#wrapper{ 
background:pink; 
border:lpx solid black; 

) 

divicontent( 
float:left; 
width:100px; 
border:lpx solid red; 
margin:lOpx; 
background:gold; 


ult 
margin:0; 
padding:0; 
list-style:none; 


a:hover( 
background:white; 


) 


<div id-"wrapper"» 
«div id-"content"» 
<p> 文 本 «a href="#"> 显 示 </a> 文本 文本 文本 文本 </p> 
<p> 文 本 文本 文本 文本 文本 文本 文本 </p> 
</div> 
<ul> 
<li><a href="#"> 显 示 </a></1i> 
<li><a href="#"> 显 示 </a></1i> 
<li><a href="#"> 不 显示 </a></1i> 
<li><a href="#"> 不 显示 </a></1i> 
<li><a href="#"> 不 显示 </a></1i> 
</ul> 
</div> 


代码 包含 一 个 容器 #wrapper， 里 面 有 个 浮动 的 div 和 若干 链接 。 当 用 IE6 打开 这 个 页 面 时 ， 
页 面 显 示 正 常 ， 当 鼠标 移 至 那些 “不 显示 ”的 链接 时 ， 问 题 出 现 了 ， 浮 动 元 素 的 下 部 被 砍 掉 不 
见 了 ， 当 鼠标 移 至 “显示 ”的 链接 时 ， 浮 动 元 素 的 高 度 又 恢复 正常 ， 如 图 15-21 所 示 。 


15-21 ”断头台 问题 


eB 
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导致 断头台 问题 出 现 的 原因 包含 以 下 几 方面 : 
e ”有 浮动 元 素 存 在 于 容器 中 。 
e ”容器 中 存在 非 浮动 的 链接 。 
@ ”通过 :hover 伪 类 改变 链接 的 某 些 属性 。 
2. 问题 解决 方案 
可 以 根据 断头台 问题 产生 的 原因 进行 解决 ， 把 非 浮动 对 象 改 为 浮动 对 象 ， 或 者 添加 额外 元 
素 清除 浮动 (注意 不 要 引入 捉迷藏 问题 )。 
作为 最 常 使 用 的 浏览 器 ，IE6 存在 的 问题 也 很 多 。 读 者 在 实际 开发 中 ， 每 完成 一 部 分 样式 
编码 后 就 该 用 浏览 器 验证 页 面 效果 ， 以 便 能 及 早 发 现 并 解决 问题 。 
Q 延伸 :在 实际 编写 XJHTML 和 CSS 样式 代码 的 过 程 中 ， 每 完成 一 小 部 分 就 应 该 立刻 用 
浏览 器 打开 页 面 查看 效果 ， 这 在 敏捷 开发 中 称 为 小 步 选 代 。 这样 做 使 我 们 能 够 在 
短 时 间 内 发 现 问题 ， 且 问题 范围 较 小 ， 解 决 起 来 比较 容易 。 


15.5 position 属性 与 定位 


position 属性 可 用 来 控制 元 素 如 何 显示 以 及 在 什么 位 置 显示 ， 它 的 属性 值 可 以 为 static. 
relative, absolute 和 fixed, 其 中 默认 值 为 static; 拥有 非 默 认 值 的 元 素 称 为 已 定位 元 素 (Positioned 
Element) 或 非 静态 定位 元 素 。position 各 属性 值 分 别 代表 着 CSS 提供 的 如 下 4 种 类 型 的 定位 。 
e 静态 定位 (static): 元 素 将 按照 文档 流 的 默认 顺序 显示 。 
e ”相对 定位 (relative): 元 素 可 以 在 文档 流 中 的 原始 位 置 上 增加 偏 移 量 ， 即 相对 于 文档 流 
中 的 位 置 进行 定位 。 
e 绝对 定位 (absolute): 元 素 将 脱离 文档 流 , 通过 上 下 左右 偏 移 值 的 组 合 来 确定 该 元 素 的 


位 置 。 
e ”固定 定位 (fixed): 元 素 将 固定 在 某 一 确定 的 位 置 上 ， 即 使 页 面 滚 动 也 不 会 影响 它 的 
位 置 。 


现在 就 来 依次 了 解 各 种 定位 类 型 的 含义 和 用 法 。 


15.5.1 静态 定位 和 相对 定位 


静态 定位 是 (X)HTML 文档 中 各 个 元 素 默 认 的 定位 方式 ， 它 们 将 按照 文档 流 的 默认 方式 显 
示 。 在 正常 的 文档 流 中 ， 每 个 元 素 都 被 定位 到 某 个 位 置 ， 我 们 称 其 为 “起 始点 ”， 此 时 top. 
right, bottom 和 left 属性 都 不 起 作用 。 而 相对 定位 则 是 在 这 个 起 始点 的 基础 上 通过 top. right. 
bottom 和 left 属性 的 组 合 对 元 素 进行 移 位 。 请 看 下 面 的 示例 : 


body{ 
padding:10px; 
border:lpx dashed #999; 
} 


div( 
height:80px; 
width:100px; 


border:lpx solid gray; 


background: yellow; 
) 
.relative( 
position:relative; 
ji 
div#box2{ 
left:10px; 
top:10px; 
div#box3{ 
right:10px; 
bottom:10px; 
} 


<div class-"static" id-"boxl"»boxl 静态 定位 </div> 
«div class-"relative" id-"box2"»box2 相对 定位 </div> 
«div class-"relative" id-"box3"»box3 相对 定位 </div> 


如 图 15-22 所 示 为 以 上 代码 的 效果 。 


图 15-22 


静态 定位 与 相对 定位 


#box2 和 #box3 采用 相对 定位 ,通过 设 定 left 和 top 属性 让 #box2 向 右 向 下 各 偏 移 10px, 设 


JE right 和 bottom 属性 让 #box3 向 左 向 上 各 偏 移 10px。 相 对 定位 中 的 偏 移 与 静态 定位 中 的 margin 
属性 的 作用 类 似 。 
图 15-23 为 相对 定位 的 原理 示意 图 。 


需要 注意 的 是 ， 偏 移 值 的 组 合 只 能 是 以 下 4 种 之 一 ， 其 余 的 组 合 都 无 效 。 
这 4 种 组 合 为 : GDtop 和 left; top 和 right; G)bottom 和 left; bottom 和 right。 即 水 平 


和 垂直 方向 各 取 一 个 属性 值 进行 组 合 。 如 果 水 平 或 垂直 方向 存在 两 个 相互 排斥 的 属性 ， 不 管 它 
们 的 顺序 如 何 ， 则 只 有 left 和 top 属性 起 作用 。 
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例如 : 


div( 
left:l0px; 
right:10px; 
top:lO0px; 
bottom:10px; 

} 

相当 于 : 

div( 
left:10px; 
top:lOpx; 

) 


top: 30px 静态 定位 位 置 


相对 定位 产生 偏 移 


position:relative 


15-23 ”相对 定位 的 原理 示意 图 


15.5.2 ”绝对 定位 


绝对 定位 的 元 素 将 脱离 原始 文档 流 ， 这 一 点 和 浮动 元 素 的 特点 相同 ,但 是 绝对 定位 的 元 素 
对 其 他 元 素 不 会 产生 任何 影响 ， 其 他 元 素 对 其 “视而不见 ”， 仿 佛 它 根本 不 存在 。 通 过 top. 
right, bottom 和 left 四 个 方向 的 偏 移 组 合 可 控制 绝对 定位 元 素 的 位 置 。 


我 们 通过 几 个 示例 来 说 明 : 
il 
padding:0; 
margin:0; 
} 
div( 
height:80px; 
width:100px; 
border:lpx solid gray; 
background: yellow; 
H 
-absolute( 
position:absolute; 
H 


div#box1l{ 
left:50px; 
top:30px; 


} 


divłbox3{ 
left:0; 
bottom: 0; 


} 


div#box4{ 
right:0; 
top:0; 


j 


div#box2{ 
margin-bottom:20px; 


} 
pt 


text-indent:2em; 
line-height:1.8em; 
width:400px; 


) 


«div 
«div 
«div 
«div 


id-"boxl" class-"absolute"»boxl 绝对 定位 </div> 
id-"box2"»box2 静态 定位 </div> 

id-"box3" class-"absolute"»box3 绝对 定位 </div> 
id-"box4" class-"absolute"»box4 绝对 定位 </div> 


<p> 绝 对 定位 的 元 素 将 脱离 文档 流 ， 这 一 点 和 浮动 元 素 的 特点 相同 ， 但 是 绝对 定位 的 元 素 不 会 对 其 他 元 
素 产生 任何 影响 ， 文 档 流 中 的 元 素 对 其 “视而不见 ”， 仿 佛 它 并 不 存在 。</P> 
<p> 通 过 设置 top、right、bottom 和 left 属性 值 可 以 精确 控制 绝对 定位 元 素 的 偏 移 位 置 。</p> 


以 上 代码 的 效果 如 图 15-24 所 示 。 


元 系 符 脱 离 文档 流 ， 这 一 点 和 浮动 元 素 的 
EE 是 绝对 定位 的 元 素 不 会 对 其 他 元 素 产 生 任何 
的 元 素 对 其 “视而不见 “， 仿 佛 它 并 不 存 
j- 
4 
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图 15-24 绝对 定位 


从 图 15-24 中 可 以 看 出 ， 由 于 #box1、#box3 和 #box4 采用 了 绝对 定位 , 它们 脱离 了 文档 流 ， 
而 余下 的 #box2 和 两 个 p 元 素 则 按照 默认 方式 显示 。 绝 对 定位 的 元 素 会 覆盖 在 其 余 元 素 的 上 面 
(下 一 小 节 介绍 的 深度 属性 可 以 将 其 署 于 元 素 下 方 ， 我 们 后 面 再 做 具体 的 介绍 )， 但 是 对 元 素 的 


285 
APN 


c 


< 
网 页 布局 开发 指南  , 


内 容 没有 产生 任何 影响 。#box1 设置 了 left 和 top 属性 ， 则 它 相 对 于 页 面 的 可 视 区 域 (Viewport) 

左上 方 产生 偏 移 。 同 理 ，#box3 设置 了 left 和 bottom， 它 相对 于 可 视 区 域 的 左下 方 产生 偏 移 。 

#box4 则 相对 于 可 视 区 域 的 右上 方 产生 偏 移 。 也 就 是 说 ， 这 时 的 绝对 定位 元 素 是 相对 于 可 视 区 

域 进行 移 位 。 当 我 们 滚动 浏览 器 的 滚动 条 时 ， 绝 对 定位 的 元 素 会 跟随 可 视 区 域 中 的 文档 一 起 移 

动 ， 如 图 15-25 所 示 。 

[3 ER: 可 视 区 域 (ViewporD， 也 称 作 视 见 区 或 视 口 ， 它 是 浏览 器 为 用 户 提供 的 一 个 用 于 
查看 Web 文档 的 区 域 ， 通 常 就 是 浏览 器 显示 网 页 的 矩形 区 域 。 如 果 文 档 内 容 超 
过 了 这 个 区 域 的 大 小 ,浏览 器 会 提供 一 种 滚动 机 制 。 比 如 当 网 页 内 容 超过 窗口 当 
前 大 小 时 ， 浏 览 器 会 自动 出 现 横向 或 /和 纵向 的 滚动 条 。 


绝对 定位 的 元 系 将 脱 敲 立 档 流 ， 这 一 点 和 洗 动 元 素 的 


担 是 绝对 定位 的 元 素 不 会 对 其 他 元 系 产 生 任何 
中 的 元 素 对 其 “视而不见 ”， 伪 佛 它 并 不 存 


wiBto. right. bottomfüleftfRUt[R TIARA 
控制 绝对 定位 元 素 的 篇 移 位 置 。 


15-25 ”绝对 定位 元 素 会 跟随 可 视 区 域 中 的 文档 一 起 移动 


- 般 情 况 下 ,我们 会 给 绝对 定位 的 元 素 设置 确切 的 宽度 和 高 度 值 ， 然 后 从 水 平和 垂直 方向 
中 各 取 一 个 属性 来 为 元 素 提供 位 置信 息 ， 这 和 控制 相对 定位 元 素 的 位 置 是 一 样 的 。 如 果 位 置信 
息 存在 冲突 ， 那 么 只 有 left 和 top 属性 起 作用 。 
请 看 示例 : 


.absolute( 
position:absolute; 

} 

div#boxl{ 
padding:10px; 
border:lpx solid black; 
background: #AAA; 
width:150px; 
height:100px; 
top:l0px; 
bottom:l0px; 
right:lOpx; 
left:l0px; 

H 


«div id-"box1l" class="absolute"> 绝 对 定位 </div> 


以 上 代码 给 #boxl 设置 了 4 个 方向 的 位 移 值 , 但 是 只 有 left 和 top 起 作用 , 因此 #box1 将 距 
离 可 视 区 域 的 堪 端 和 项 端 各 10px( 见 图 15-26)。 

但 是 ， 当 绝对 定位 元 素 没有 被 指定 确切 的 高 度 或 宽度 时 ， 偏 移 属性 将 直接 控制 元 素 边 界 的 
位 置 ， 从 而 能 起 到 控制 元 素 的 大 小 的 作用 。 


15-26 ” 当 偏 移 属性 产生 冲突 时 ， 绝 对 定位 元 素 的 位 置 由 left 和 top 属性 确定 


图 15-27 中 的 #box1 四 个 方向 的 边界 距离 可 视 区 域 的 四 边 均 是 10px， 同 时 也 改变 了 #box1 
的 大 小 。 


图 15-27 通过 偏 移 属性 控制 元 素 大 小 
到 目前 为 止 ， 我 们 看 到 绝对 定位 元 素 都 是 在 浏览 器 窗口 中 确定 位 置 的 ， 除 此 之 外 ， 绝 对 定 
位 元 素 还 可 以 相对 于 其 某 个 祖先 元 素 进行 定位 ， 该 祖先 元 素 是 距离 这 个 元 素 最 近 的 已 定位 元 
素 。 请 看 下 面 这 个 示例 : 


div#container{ 
width:200px; 
height:160px; 
border:lpx solid gray; 

} 

.absolute( 
position:absolute; 


} 
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div#boxl1{ 
height:80px; 
width:120px; 
left:0; 
top:0; 
border:lpx solid black; 
background: yellow; 

) 


«div id="container"> 
<div id-"boxl" class="absolute"> 绝 对 定位 </div> 
</div> 


以 上 代码 效果 如 图 15-28 所 示 , #boxl 脱离 了 父 元 素 #eontainer 的 包围 ， 紧 靠 在 浏览 器 窗口 


的 左上 角 。 


ZR ERN - Microsoft Internet Explorer. 


xMC) MEO SEV BRA IAD PHW Ea 


Qa- O- AA voeem Os 


1528 ”绝对 定位 元 素 脱离 了 父 元 素 的 包围 


如 果 将 #container 的 position 属性 设 为 relative, absolute 或 fixed(IE6 中 无 效 )， 则 #box1l 将 


相对 于 #container 进行 定位 ( 见 图 15-29)。 


FJ EUEN - Microsoft Internet Explorer. 
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15-29 ”绝对 定位 元 素 相对 于 距离 自己 最 近 的 已 定位 的 父 元 素 进行 定位 


图 15-30 为 绝对 定位 的 原理 示意 图 。 


R 


top: 30px 


left Süpx 绝对 定位 元 素 


可 视 区 域 或 
| 距离 最 近 的 已 定位 的 祖先 元 素 


15-30 绝对 定位 的 原理 示意 图 


15.5.3 固定 定位 


固定 定位 的 元 素 会 被 固定 在 浏览 器 中 , 不 会 跟随 页 面 一 起 滚动 。 注意 IEG 不 支持 固定 定位 。 


请 看 下 面 这 个 示例 : 


pt 
text-indent:2em; 
line-height:2em; 

) 

.fixed{ 
position:fixed; 

} 

div#boxl1{ 
width:100px; 
height:100px; 
border:lpx solid gray; 
background:silver; 


) 


«div id-"boxl" class-"fixed"»«/div» 

<p> 固 定 定位 元 素 将 被 固定 浏览 器 窗口 中 ， 不 会 跟随 页 面 滚动 而 发 生 位 移 。 这 和 
background-attachment 属性 的 fixed 效果 类 似 。IE6 及 以 下 版 本 不 支持 固定 定位 。</p> 
<p> 固 定 定位 元 素 将 被 固定 浏览 器 窗口 中 ， 不 会 跟随 页 面 滚动 而 发 生 位 移 。 这 和 
background-attachment 属性 的 fixed 效果 类 似 。IE6 及 以 下 版 本 不 支持 固定 定位 。</p> 
<p> 固 定 定位 元 素 将 被 固定 浏览 器 窗口 中 ， 不 会 跟随 页 面 滚动 而 发 生 位 移 。 这 和 
background-attachment 属性 的 fixed 效果 类 似 。IE6 及 以 下 版 本 不 支持 固定 定位 。</p> 


代码 效果 如 图 15-31 所 示 。 
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15-31 ”固定 定位 元 素 ， 其 位 置 永远 基于 浏览 器 的 窗口 (Firefox 浏览 器 ) 


, 
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固定 定位 元 素 的 left. right. top 和 bottom 属性 的 用 法 和 意义 与 绝对 定位 元 素 一 致 ， 这 里 
不 再 袭 述 。 


15.6 ”利用 定位 实现 布局 


和 浮动 属性 相 比 ， 利 用 位 置 属性 进行 页 面 布局 的 情况 在 实际 中 使 用 得 并 不 多 见 ， 但 是 它 的 
确 可 以 进行 页 面 布局 ， 本 节 我 们 将 介绍 如 何 利 用 position 属性 实现 分 栏 式 的 布局 。 

利用 定位 实现 分 栏 式 布 局 需要 如 下 几 个 步骤 。 

(1) 划分 逻辑 区 域 

首先 将 页 面 不 同 区 域 的 内 容 放置 在 单独 的 div 元 素 中 ， 并 设 定好 ID 属性 。 有 时 可 能 还 会 
增加 额外 的 div， 作 为 其 他 元 素 的 容器 。 

Q) 设置 侧 栏 的 位 置 属性 

将 作为 容器 使 用 的 div 元 素 的 position 属性 设 为 relative, 目的 是 让 其 内 部 元 素 能 正确 定位 。 
然后 将 侧 栏 的 position 属性 设 为 absolute， 并 根据 需要 确定 其 位 置 。 

(3) 处 理 其 余 栏 

对 于 其 余 栏 ， 可 根据 需要 设置 左右 边 距 ， 把 覆盖 在 侧 栏 下 面 的 内 容 显 示 出 来 。 

上 述 布局 步骤 可 参考 图 15-32。 


主要 内 容 


添加 左边 距 


15-32 利用 position 属性 实现 分 栏 式 布局 的 原理 图 
下 面 这 段 代 码 展示 了 一 个 三 分 栏 式 的 布局 结构 。 


div( 
border:lpx solid gray; 
background: yellow; 

} 

#top{ 
width:700px; 
height:40px; 
margin-bottom: 10px; 

} 


效果 如 图 15-33 所 示 。 
© 注意 :， 该 例 中 ,如 果 左 栏 或 右 栏 的 高 度 超 过 了 中 栏 ， 则 左 栏 或 右 栏 会 超出 容器 元 素 覆 盖 
到 下 面 的 底 脚 ， 这 是 因为 绝对 定位 的 元 素 脱离 了 文档 流 ， 它 的 容器 不 再 将 其 包含 
在 内 ， 高 度 也 就 不 会 随 之 变化 。 这 也 是 使 用 position 属性 定位 所 带 来 的 问题 。 可 
以 添加 额外 的 脚本 代码 来 控制 容器 元 素 的 高 度 。 


HTML+CSS 


图 15-33 ”通过 position 属性 实现 三 栏 式 布局 
15.7 ”控制 元 素 的 深度 


在 前 面 的 示例 中 ,任何 已 定位 元 素 都 会 覆盖 在 位 于 文档 流 中 的 元 素 之 上 ， 实 际 上 每 个 元 素 
分 别 位 于 深度 不 同 的 层 中 ， 当 层 与 层 之 间 有 重 登 区 域 时 ， 就 会 有 一 个 元 素 覆 盖 到 另 一 个 元 素 之 
上 。 相当 于 在 平面 的 x 轴 和 Yy 轴 基 础 上 添加 了 一 个 虚拟 的 垂直 于 浏览 器 的 z 轴 。CSS 的 z-index 
属性 可 修改 元 素 的 深度 属性 ， 调 整 覆 盖 关 系 。z-index 属性 值 为 整数 ， 数 值 越 大 越 靠近 z 轴 的 顶 
端 ( 越 靠近 浏览 者 )。 注 意 z-index 属性 只 对 已 定位 元 素 有 效 。 
请 看 示例 : 
div{ 
height:100px; 
width:100px; 
border:lpx solid gray; 
position:absolute; 
n 
divfboxl( 
left:l10px; 
top:lOpx; 
background: yellow; 
ü 
div#box2{ 
left:20px; 
top:20px; 
background:green; 


e 


div#box3{ 
left:30px; 
top:30px; 
background:pink; 

} 

divłbox4{ 
left:40px; 
top:40px; 
background: red; 


} 


«div id="box1l"></div> 
«div id="box2"></div> 
«div id-"box3"»«/div» 
«div id-"box4"»«/div» 


默认 情况 下 ， 后 面 的 元 素 会 覆盖 在 前 面 的 元 素 之 上 (如 图 15-34 所 示 )。 


1534 ”默认 情况 下 后 面 的 元 素 覆盖 前 一 元 素 上 
现在 我 们 给 4 个 div 元 素 分 别 添加 z-index 属性 : 


div#boxl{z-index:4; 
div#box2{z-index:3; 
div#box3{z-index:2; 
div#box4{z-index:1; 


#boxl 位 于 最 顶端 ， 下 面 依次 是 #box2、#box3 和 #box4( 如 图 15-35 所 示 )。 


} 
) 
) 
) 


15-35 ”通过 z-index 属性 修改 元 素 深度 
一 些 网 页 提供 了 类 似 于 操作 系统 中 的 提示 框 的 功能 ， 该 提示 框 会 位 于 其 余 任 何 元 素 之 上 ， 
这 就 是 通过 设 定 一 个 相当 大 的 z-index 属性 值 实现 的 。 
[À 提示 : AIE P, ŽAK select 不 受 z-index 元 素 的 影响 ， 总 是 位 于 其 他 元 素 之 上 。 可 
以 在 需要 时 将 select 暂时 隐藏 掉 。 
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15.8 元素 的 可 见 性 


CSS 的 visibility 属性 可 控制 元 素 是 否 可 见 ， 属 性 值 visible 表示 可 见 ，hidden 则 表示 隐藏 。 
它 经 常 配合 不 同类 型 的 已 定位 元 素 使 用 。 比 如 上 一 小 节 提 到 的 提示 框 ， 不 显示 时 可 将 其 设 为 
hidden， 当 需要 向 访问 者 提示 信息 时 可 将 其 设 为 visible( 通 过 脚本 代码 实现 转换 )。 

visibility 的 hidden 和 display 的 none 类 似 , 都 是 不 显示 元 素 , 但 它们 的 实现 方式 略 有 不 同 。 
hidden 将 元 素 隐藏 ， 但 是 元 素 所 占据 的 空间 依旧 存在 。none 相当 于 将 元 素 完全 除 掉 。 

请 看 示例 : 

<p>visibility 的 hidden 与 display lf] none 类 似 , 但 是 有 所 区 别 。</p> 

<p>visibility 的 <span style="visibility:hidden;">hidden</span> 与 display 的 

«span style="display:none;">none</span> 类 似 , 但 是 有 所 区 别 。</p> 


如 图 15-36 所 示 为 以 上 代码 的 效果 。 
visibility 的 hidden 与 display 的 none 类 似 ， 但 是 有 所 区 别 。 
visibility 的 与 display 的 类 似 ， 但 是 有 所 区 别 。 

15-36 hidden 和 none 的 区 别 


第 7 章 讲 过 ，overflow 属性 告诉 浏览 器 如 何 处 理 超出 元 素 范 围 的 区 域 。 但 是 绝对 定位 的 元 
素 会 脱离 文档 流 ， 使 父 元 素 的 overflow 属性 不 再 起 作用 (前 提 是 父 元 素 采 用 默认 的 静态 定位 )。 
这 时 我 们 可 以 使 用 CSS 的 clip 属性 对 绝对 定位 元 素 进行 裁剪 。 

clip 属性 的 形式 为 : 


Clip: rect(top right bottom left); 


top. right, bottom 和 left 分 别 表 示 上 、 右 、 下 、 左 四 个 方向 的 边 相 对 于 元 素 左上 角 的 偏 移 
值 ， 请 看 示例 : 


body{ 
margin:10px; 

} 

div#box1{ 
height:100px; 
width:100px; 
background:yellow; 
overflow:hidden; 

} 

div#box2{ 
height: 60px; 
width:200px; 
position:relative; 
top:l0px; 
left:l0px; 
background:pink; 


} 


«div id-"box1"» 
<div id-"box2"»«/div» 
«/div» 
#box2 采用 相对 定位 ， 它 超出 #5ox1l 的 区 域 不 可 见 ， 图 15-37 显示 了 Firefox 浏览 器 中 的 效 
R, ER E 浏览 器 中 overflow 属性 不 再 起 作用 。 


15-37 overflow 属性 对 采用 相对 定位 的 元 素 依然 有 效 (Firefox 浏览 器 ) 


如 果 我 们 将 #box2 的 position 属性 改 为 absolute, 那么 overflow 属性 将 不 起 作用 ,除非 改变 
#boxl 默认 的 定位 属性 。 图 15-38 展示 了 修改 #box2 的 position 属性 之 后 的 效果 。 


图 15-38 绝对 定位 元 素 使 采用 静态 定位 的 父 元 素 的 overflow 属性 失效 
现在 我 们 为 #box2 添加 clip 属性 对 其 进行 剪裁 : 


clip: rect(0 100px 60px 0); 


#box2 的 右边 距离 左上 角 的 水 平 距离 为 100px， 这 样 就 从 视觉 上 隐藏 了 超出 的 部 分 ( 见 
图 15-39)。 当 然 我 们 也 可 以 任意 调整 裁剪 区 域 的 大 小 以 实现 其 他 效果 。 


15-39 通过 clip 属性 对 #box2 进行 裁剪 


© 注意 : 如 果 读者 查阅 CSS 规范 或 者 其 他 一 些 介绍 CSS 的 书籍 ， 就 会 发 现 clip 属性 的 形 
AA "rect(top, right, bottom, lefp”， 各 个 载 剪 范围 值 之 间 用 过 号 相隔 ， 而 在 本 书 
+, clip 属性 的 各 个 值 之 间 用 空格 相隔 。 实 践 证 明 , IE 浏览 器 只 能 识别 以 空白 ( 包 
括 空格 符 、 制 表 符 和 换行 符 ) 相 隔 的 clip 属性 值 ,因此 本 书 采用 的 形式 为 “rect(top 
right bottom left)" 。 


E 


c 
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19.9 : 结 


KEMAT CSS 布局 中 常用 的 浮动 技术 。(X)HTML 中 各 种 元 素 遵循 着 一 定 的 显示 规律 : 
内 联 元 素 沿 水 平方 向 依次 排列 ， 元 素 前 后 没有 换行 ， 块 级 元 素 沿 竖 直 方向 依次 排列 ， 元 素 前 后 
产生 换行 ， 这 种 显示 方式 就 构成 了 (X)HTML 文档 流 。 

浮动 元 素 会 脱离 原始 的 (X)HTML 文档 流 ，“ 漂 浮 ” 在 这 个 文档 流 之 上 ， 后 面 的 非 浮 动 元 素 
会 占据 浮动 元 素 的 位 置 ， 且 非 浮动 元 素 中 的 内 容 会 围绕 在 浮动 元 素 周围 。 元 素 浮动 后 将 自动 转 
换 为 块 级 元 素 ， 它 向 左 或 向 右 停靠 在 其 容器 的 边缘 。 

float 属性 可 以 使 元 素 产生 向 左 或 向 右 的 浮动 ， 使 用 它 可 以 轻松 实现 图 文 混 排 。clear 属性 
可 以 消除 浮动 元 素 对 非 浮动 元 素 产 生 的 影响 ， 即 非 浮动 元 素 中 的 内 容 会 围绕 在 浮动 元 素 的 周 
围 ， 使 用 clear 属性 可 以 取消 这 种 围绕 效果 。 

浮动 是 页 面 布局 的 基础 ， 利 用 float 属性 可 以 实现 页 面 分 栏 式 布局 。 

本 章 还 介绍 了 TE 浏览 器 中 4 个 有 关 浮 动 的 问题 、 它 们 产生 的 原因 以 及 相应 的 解决 方法 。 

CSS 的 position 属性 可 控制 元 素 的 定位 方式 ， 默 认 情况 下 (X)HTML 中 元 素 采用 静态 定位 
方式 ， 即 按照 文档 流 的 顺序 进行 显示 。 除 此 之 外 ， 元 素 还 可 以 进行 相对 定位 、 绝 对 定位 和 固 
定 定位 。 

相对 定位 的 元 素 以 文档 流 中 默认 位 置 为 基准 进行 位 移 。 绝 对 定位 元 素 将 脱离 原始 文档 流 ， 
它 将 相对 于 距离 自己 最 近 的 已 定位 的 祖先 元 素 进行 定位 ， 如 果 不 存在 这 样 的 祖先 元 素 ， 则 大 多 
数 浏览 器 会 使 其 相对 于 可 视 区 域 进行 定位 。 固 定 定位 元 素 始终 保持 其 在 浏览 器 可 视 区 域 中 的 位 
置 ， 不 受 页 面 滚动 的 影响 。 注 意 下 6 不 支持 固定 定位 。 

最 后 还 介绍 了 如 何 利用 position 属性 实现 页 面 分 栏 式 的 布局 ， 并 通过 具体 的 代码 进行 了 
展示 。 

CSS 的 z-index 属性 可 控制 元 素 的 深度 ， 即 z 轴 上 的 位 置 。visibility 属性 可 用 来 控制 元 素 
的 可 见 性 。clip 属性 可 对 绝对 定位 的 元 素 进 行 裁剪。 

在 下 一 章 中 ， 将 介绍 几 种 常见 的 页 面 布局 形式 以 及 它们 的 实现 方法 。 


第 16 章 常见 的 页 面 布 局 方式 


CSS 的 强大 之 处 在 于 它 不 仅 能 控制 网 页 中 的 元 素 样 式 ， 还 能 从 整体 上 对 Web. 页 面 进行 布 
局 。 上 一 章 介绍 的 浮动 和 定位 就 是 CSS 用 来 布局 的 核心 技术 。 在 过 去 , Web 设计 人 员 使 用 table 
元 素 对 页 面 进行 布局 ， 通 过 多 个 嵌 套 的 表格 来 实现 多 行 、 多 列 的 效果 。 但 是 这 种 做 法 违背 了 
COHTML 的 语义 性 ， 是 对 table 元 素 的 小 用， 因此 是 不 可 取 的 。 

本 章 将 介绍 一 些 常 见 的 网 页 布局 方式 ， 将 说 明 它们 的 优势 与 不 足 各 是 什么 ， 以 及 如 何 使 用 
CSS 来 实现 不 同 的 布局 方案 。 

本 章 主要 内 容 

e 常见 的 布局 形式 
什么 是 固定 式 布局 
什么 是 流动 式 布局 
什么 是 弹性 布局 
float 与 position 属性 的 对 比 


16.1 布局 类 型 概述 


页 面 的 布局 类 型 可 大 致 分 为 以 下 3 类 : 固定 式 布局 、 流 动 式 布局 和 弹性 布局 。 

(1) 固定 式 (Fixed) 布 局 

采用 固定 式 布局 的 页 面 ， 其 宽度 不 跟随 浏览 器 窗口 的 宽度 进行 变化 ， 当 然 也 不 受 显 示 器 分 
辩 率 的 影响 。 通常， 固定 式 的 页 面 内 容 宽度 限定 在 760px 左右 ， 适 合 800x600 的 分 辩 率 下 的 显 
示 ， 随 着 1024x768 分 辩 率 的 普及 ， 不 少 页 面 也 开始 扩展 固定 宽度 的 大 小 。 图 16-1 为 网 易 的 首 
页 ， 它 的 宽度 就 固定 在 750px， 而 中 国 雅虎 的 页 面 宽 度 为 950px， 适 合 1024x768 分 辩 率 下 的 显 
示 ( 见 图 16-2)。 

不 管 显 示 设 备 的 尺寸 如 何 ， 固 定式 布局 的 页 面 效 果 总 是 相同 的 。 当 浏览 器 窗口 过 小 时 ， 用 
户 需要 移动 滚动 条 才能 浏览 整个 页 面 ， 而 当 浏 览 器 窗口 过 大 时 ， 页 面 会 产生 大 量 的 空白 区 域 。 

(2) 流动 式 (Fluid) 布 局 

采用 流动 式 布局 的 页 面 ， 其 宽度 能 自动 适应 浏览 器 的 窗口 大 小 。 当 用 户 调整 浏览 器 窗口 大 
小 时 , 页 面 内 容 也 会 随 之 变化 。 这 种 布局 方式 不 会 在 窗口 中 产生 空白 区 域 , 空间 利用 率 比较 高 ， 
但 是 如 果 用 户 的 显示 设备 过 大 或 者 过 小 ， 则 页 面 效 果 可 能 会 变 得 很 差 。 卓越 亚马逊 就 采用 了 流 
动 式 布局 ， 页 面 左 栏 和 中 栏 会 自动 适应 不 同 宽度 的 浏览 器 窗口 ( 见 图 16-3)。 

(3) 弹性 (Elastic) 布 局 

在 采用 弹性 布局 的 页 面 中 ， 元 素 会 根据 文字 的 大 小 进行 变化 。 文 字 和 页 面 元 素 使 用 百分数 
或 者 使 用 em 作为 单位 的 长 度 值 ， 当 用 户 通过 浏览 器 调整 文字 大 小 时 ， 页 面 元 素 会 随 着 文字 大 
小 进行 变化 。 英 文雅 虎 的 页 面 就 是 一 个 弹性 布局 的 例子 (如 图 16-4 所 示 ， 图 中 左 侧 为 正常 文字 
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大 小 时 页 面 效果 ， 右 侧 为 将 文字 大 小 设 为 较 大 时 的 效果 )。 


采用 弹性 布局 的 页 面 可 以 让 用 户 在 更 改 字体 大 小 的 同时 ， 也 能 获得 较 好 的 效果 。 


可 以 自行 设置 浏览 器 的 默认 字体 大 小 值 ， 页 面 效果 也 因此 具有 一 定 的 不 可 预测 性 。 
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图 16-4 ”英文 雅虎 (http://www.yahoo.com) 页 面 采用 弹性 布局 ， 元 素 宽度 会 跟随 文字 大 小 进行 变化 


16.2 float 还 是 position 


上 一 章 介绍 了 CSS 的 float 和 position 属性 ， 它 们 均 可 用 来 布局 页 面 元 素 ， 那 么 对 于 这 两 
种 不 同 的 布局 方式 ， 我 们 应 该 如 何 选择 呢 ? 它们 的 优势 和 劣势 以 及 适用 范围 各 是 什么 呢 ? 


16.2.1 float 布局 


float 属性 使 元 素 在 原 有 的 位 置 上 向 左 或 向 右 浮动 。 由 于 浮动 元 素 的 位 置 是 基于 其 在 文档 流 
中 的 原始 位 置 的 ， 因 此 浮动 布局 的 灵活 性 比较 低 。 另 外 ， 许 多 浏览 器 的 显示 问题 都 是 由 float 
属性 导致 的 , 虽然 大 部 分 问题 都 有 相应 的 解决 方法 , 但 这 无 疑 会 增加 设计 成 本 , 降低 开发 速度 。 

float 属性 一 般 用 来 实现 比较 简单 的 页 面 布局 形式 ， 且 (X)HTML 元 素 和 其 布局 位 置 相差 
不 多 。 


16.2.2 position 布局 


position 属性 可 将 元 素 放置 在 浏览 器 窗口 中 的 任何 位 置 上 ， 不 受 元 素 在 原始 文档 流 中 位 置 
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的 干扰 ， 因 而 具有 较 高 的 灵活 性 。 但 是 已 定位 元 素 会 脱离 文档 流 ， 当 元 素 大 小 不 可 知 时 ， 我 们 
没有 办 法 让 其 他 元 素 相对 于 该 元 素 进行 定位 (比如 定位 到 该 元 素 的 底部 )。 
当 元 素 顺序 和 其 显示 位 置 相 差 较 多 且 元 素 大 小 固定 时 可 选择 定位 属性 进行 布局 。 


16.3 布局 实战 


在 上 一 章 曾 介绍 过 如 何 使 用 浮动 属性 实现 页 面 的 布局 ， 本 章 实战 内 容 将 利用 CSS 浮动 原 
理 分 别 实现 3 种 不 同类 型 的 页 面 布局 ， 我 们 将 略 去 页 面 中 的 细节 ， 只 关注 整体 效果 。 上 一 章 还 
介绍 了 如 何 用 定位 属性 进行 布局 , 考虑 到 实际 开发 中 利用 定位 属性 进行 整体 布局 的 情况 比较 少 
见 ， 本 章 将 不 再 讨论 。 


16.3.1 二 分 栏 固定 式 布局 


本 小 节 将 实现 一 个 三 行 两 列 的 固定 式 布局 页 面 ， 其 原理 如 图 16-5 所 示 。 


Liz 主要 内 容 


16-5 三 行 两 列 固定 式 布局 原理 
首先 准备 好 (X)HTML 代码 : 


<div id="wrapper"> 
<div id="header"></div> 
<div id="sidebar"></div> 
<div id="content"></div> 
<div id="footer"></div> 
</div> 


#wrapper 作为 容器 控制 着 整个 页 面 的 宽度 ， 我 们 把 该 元 素 的 宽度 设 为 760px: 


div#wrapper{ 
width:760px; 
H 


接着 我 们 将 侧 栏 向 左 浮动 ， 并 设置 其 宽度 为 200px: 


主要 内 容 部 分 可 采用 多 种 方式 实现 ， 这 里 我 们 让 此 ontent 也 向 左 浮动 : 


最 后 我 们 给 #footer 添加 clear 属性 ， 使 其 能 位 于 浮动 元 素 的 下 方 : 


以 上 为 实现 布局 的 基本 CSS 样式 代码 ， 为 了 获得 更 好 的 页 面 效 果 ， 我 们 修改 或 添加 了 一 
些 样式 ， 以 下 是 完整 的 代码 : 
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} 
.sectionstyle2{ 
background:lightyellow; 


border:lpx solid gray; 
) 


«div id-"wrapper"» 
<div id-"header" class-"sectionStylel"»«/div» 
<div id-"sidebar" class-"sectionStyle2"»«/div» 
«div "content" class-"sectionStyle2"»«/div» 
<div id-"footer" class-"sectionStylel"»«/div» 
«/div» 


页 面 效 果 如 图 16-6 所 示 。 
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16-6 三 行 两 列 固 定式 布局 效果 


有 时 Web 设计 者 对 文档 中 元 素 出 现 的 顺序 要 满足 一 定 的 要 求 ， 比 如 将 主要 内 容 放 在 导航 、 
侧 栏 等 一 类 的 次 要 内 容 之 前 ， 以 便当 设备 不 支持 CSS 时 ， 重 要 内 容 能 位 于 次 要 内 容 之 前 。 在 
本 例 中 ， 假 如 要 求 #content 必须 出 现在 #sidebar 之 前 ， 且 还 想 保持 现 有 的 样式 不 变 ， 该 如 何 做 
呢 ? 利用 CSS 中 的 负 边 距 就 可 以 轻松 实现 。 

首先 我 们 更 改 (X)HTML 文档 ， 将 #content 和 #sidebar 的 位 置 进行 互 换 : 

<div id="wrapper"> 

<div "header" class-"sectionStylel"»«/div» 

«div id-"content" class-"sectionStyle2"»«/div» 

<div id-"sidebar" class-"sectionStyle2"»«/div» 

<div id-"footer" class-"sectionStylel"»«/div» 
</div> 


现在 效果 如 图 16-7 所 示 (图 为 Firefox 浏览 器 中 的 效果 , IE6 中 存在 边 距 加 倍 问 题 , sidebar 
会 因 右 侧 空间 不 足 而 被 挤 到 #content 下 面 ), 根据 文档 流 和 浮动 原理 , #content 位 于 左 侧 , sidebar 
位 于 右 侧 ， 但 这 并 不 是 我 们 想 要 的 结果 。 
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16-7 更改 #sidebar 和 #content 位 置 之 后 ， 二 者 左右 位 置 颠倒 (Firefox 浏览 器 ) 


我 们 的 解决 方案 是 给 #content 增加 足够 的 左边 距 ， 使 左边 有 空间 显示 #fsidebar， 然 后 再 给 
#sidebar 添加 适当 的 负 左 边 距 ， 把 它 “ 搜 ”向 左 端 。 最 后 修正 IE6 的 边 距 加 倍 的 问题 。#content 
和 #sidebar 的 全 部 样式 代码 如 下 : 


div#sidebar{ 


} 


float:left; 
width:198px; 
margin-bottom: 10px; 
margin-left:-760px; 
height:300px; 


div#content{ 


} 


float:left; 
width:548px; 
margin-left:210px; 
margin-bottom:1lO0px; 
height:400px; 
display:inline; 


效果 最 终 如 图 16-8 所 示 。 


Element Fusion(http://www.elementfusion.com/) 是 一 家 网 站 设计 、 网 络 开发 公司 ， 


/* 将 sidebar“ 搜 ”向 左 端 */ 


/* 留 出 左 侧 sidebar 的 空间 */ 


/* 修正 IE6 的 边 距 加 倍 问题 */ 


站 的 页 面 就 采用 了 左右 两 分 栏 的 格局 ( 见 图 16-9)。 
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图 16-8 使 用 负 边 距 实现 布局 
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图 16-9 Element Fusion 网 站 页 面 采用 了 左右 两 栏 的 布局 


N 


页 面 内 容 部 分 的 核心 代码 大 致 如 下 : 
«div id-"frame"» 
«div id-"header"5...«/div» 
<div id-"container"»...«/div» 
<div id-"extraCol"5...«/div» 
</div> 
<div id="footer">...</div> 
包含 左右 两 栏 内 容 的 容器 #container 和 #extraCol 分 别 指定 了 float:left 和 float:right 声明 , 从 
而 形成 左右 两 栏 的 基本 布局 形式 。 为 了 使 页 面 水 平 居中 对 齐 ，#fame 元 素 添加 了 margin: 0px 
auto; 声 明 。 
(Rh 提示 : ”在 确定 左右 两 栏 宽度 时 ， 一 些 设计 师 采 用 了 黄金 分 割 比例 ， 以 增强 页 面 的 美感 。 
比如 ， 若 页 面 的 整体 宽度 为 760px， 那 么 主要 内 容 区 域 的 宽度 就 可 定 为 
760/1.618=470px， 侧 栏 宽度 则 为 760-470=290px。 


16.3.2 三 分 栏 流动 式 布局 


流动 式 布局 要 求 页 面 区 域 能 自动 适应 浏览 器 的 窗口 ， 大 小 可 灵活 变化 。 其 中 的 关键 在 于 容 
器 元 素 的 宽度 值 单 位 不 使 用 确定 的 长 度 值 ， 而 使 用 百分数 或 者 不 设置 宽度 属性 。 本 小 节 首 先 将 
实现 一 个 三 行 三 列 流动 式 的 布局 ， 其 中 中 栏 部 分 的 宽度 会 自动 变化 ,左右 两 个 侧 栏 的 宽度 保持 
固定 不 变 。 图 16-10 为 三 行 三 列 布局 的 示意 图 。 


16-10 三 行 三 列 流动 式 布局 


(X)HTML 代码 如 下 : 


<div id="header"></div> 
<div id="sidebar"></div> 
«div id="secondary"></div> 
<div id="main"></div> 
<div id="footer"></div> 


DI irr a 


我 们 让 #sidebar 向 左 浮动 ，#secondary 向 右 浮动 ， 最 后 给 中 栏 设 定 适当 的 左右 边 距 ， 完 整 
的 CSS 代码 和 修改 之 后 的 CYHTML 代码 如 下 : 


<style type="text/css"> 

div#header{ 
height:100px; 
margin-bottom:10px; 


} 

div#sidebar{ 
float:left; 
width:198px; 
margin-bottom: 10px; 
height:300px; 

H 

div#secondary{ 
float:right; 
width:198px; 
margin-bottom: 10px; 
height:400px; 

} 

div#main{ 
margin-left:210px; 
margin-right:210px; 
margin-bottom: 10px; 
height:400px; 

} 

div#footer{ 
clear:both; 
height:80px; 

} 

.sectionStylel( 
background:pink; 
border:lpx solid gray; 

} 

-sectionStyle2( 
background:lightyellow; 
border:lpx solid gray; 

} 

</style> 

<!--[if IE 61> 

«1-- 修正 IE6 浮动 bug --> 

«style type="text/css"> 

divimain( 
margin-left:207px; 
margin-right:207px; 


cM 


H 
«/style» 
<! [endif]--» 


<body> 

<div id="header" class="sectionStylel"></div> 
<div id="sidebar" class="sectionStyle2"></div> 
<div id="secondary" class="sectionStyle2"></div> 
<div id="main" class="sectionStyle2"></div> 
<div id="footer" class="sectionStylel"></div> 
</body> 


我 们 给 左 栏 和 右 栏 添加 了 固定 的 宽度 值 ， 中 间 一 栏 只 设置 了 左右 边 距 ， 因 此 它 的 宽度 将 按 
照 块 级 元 素 的 特性 进行 变化 ， 即 水 平 延展 到 容器 边缘 为 止 。 代 码 最 后 添加 了 IE6 特定 的 代码 ， 
其 中 把 #main 的 左右 边 距 各 减少 了 3px， 为 什么 这 么 做 呢 ? 前 面 说 过 IE6 中 非 浮动 元 素 没 能 完 
全 占据 浮动 元 素 原来 的 位 置 ， 而 是 靠 在 浮动 元 素 旁 边 。 而 正 6 存在 的 3px 间隔 问题 导致 元 素 之 
间 存 在 一 定 距离 ， 因 此 IEG 中 #main 的 左右 边 距 应 该 减 去 这 个 边 距 值 ， 这 样 区 域 之 间 的 距离 才 
真正 是 10px。 页 面 效果 如 图 16-11 所 示 。 
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16-11 三 栏 流动 式 布局 


当 浏 览 器 窗口 宽度 过 小 时 ， 以 上 方式 将 会 产生 问题 ， 左 右 浮 动 的 元 素 会 将 中 间 一 栏 向 下 排 
挤 ， 甚 至 右 栏 也 会 被 排挤 到 左 栏 的 下 面 。 现 在 我 们 要 对 这 种 方式 进行 改进 ， 防 止 窗 口 过 罕 导 致 
页 面 布局 混乱 ， 同 时 我 们 将 实现 一 种 两 栏 流动 、 一 栏 固 定 的 布局 方式 。 

首先 修改 COHTML 代码 , 我 们 将 原 有 的 元 素 放置 在 一 个 div 容器 中 , 再 将 #sidebar M#main 
放 在 一 个 div 容器 中 ， 代 码 如 下 : 


<div id="wrapper"> 


<div id-"header" class="sectionstylel"></div> 
<div id-"secondary" class-"sectionStyle2"»«/div» 
«div id-"wrapperLeft"» 
«div id-"sidebar" class-"sectionStyle2"»«/div» 
<div id-"main" class-"sectionStyle2"»«/div»^ 
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</div> 
«div id-"footer" class="sectionstylel"></div> 


</div> 


包含 左 栏 和 中 栏 的 容器 #wrapperLeft 需要 设置 适当 的 右边 距 ， 让 出 右 栏 的 空间 。 添 加 如 下 
代码 : 


div#wrapperLeft{ 

margin-right:210px; 
margin-bottom:l0px; 

) 

在 容器 内 ，#sidebar 和 #main 可 全 部 向 左 浮动 ， 或 者 一 左 一 右 浮动 。 左 栏 与 中 栏 之 间 存 在 
10px 间距 ， 因 此 两 列 的 宽度 之 和 并 不 是 100%， 余 下 空间 留 给 了 间距 ， 和 否则 会 因 容器 的 水 平 空 
间 不 足 导致 中 栏 移 到 左 栏 的 下 面 。 以 下 是 对 #sidebar 和 #main 修改 后 的 代码 : 

div#sidebar{ 

float:left; 
width:19%; 
height:300px; 
margin-right:10px; 

) 

divimain( 

float:left; 
width:78.4$; 
height:420px; 

) 

由 于 我 们 要 求 当 浏览 器 窗口 宽度 小 于 一 定数 值 时 ， 页 面 宽度 应 该 保持 不 变 。 我 们 给 最 外 侧 
的 容器 #wrapper 添加 如 下 代码 : 

divfwrapper( 

min-width:750px; — /* 针对 非 IE6 浏览 器 */ 
width:expression((document.documentElement.clientWidth < 770)?750:'auto'); 
/* 针对 IE6 浏览 器 */ 

) 

min-width 属性 设置 #wrapper 宽度 最 小 值 为 750px, 针对 IE6, 使 用 CSS 表达 式 实 现 相 同 的 
功能 (读者 可 以 参考 本 书 第 17 章 的 相关 内 容 )。 表 达 式 的 含义 是 当 浏 览 器 可 视 区 域 的 宽度 小 于 
770px 时 ，#wrapper 的 宽度 值 就 为 7530px， 否 则 为 auto。 条 件 的 边界 值 之 所 以 设 为 770px， 是 考 
虑 了 #wrapper 元 素 与 浏览 器 窗口 之 间 存 在 一 定 的 空 阶 。 

最 后 取消 上 例 中 针对 正 6 添加 的 样式 代码 ， 效 果 如 图 16-12 所 示 。 

从 图 16-12 中 可 以 看 出 #wrapperLeft 的 下 边 距 没有 起 作用 ， 底 脚 和 中 栏 之 间 没 有 空 阶 ( 空 阶 
是 否 存在 还 与 浏览 器 窗口 宽度 有 关系 )， 这 是 因为 #wrapperLeft 内 的 两 个 元 素 均 是 浮动 元 素 , 其 
高 度 则 不 会 根据 它们 的 高 度 进行 变化 ， 因 此 我 们 需要 添加 额外 的 元 素来 清除 浮动 。 


Æ 16-12 修改 后 的 流动 布局 页 面 效果 
完整 代码 如 下 : 


IE 人 m. 


width:78.4$; 
height:420px; 


j 

div#footer{ 
clear:both; 
height:80px; 

div#hack{ 
clear:both; 

) 

-sectionStylel( 
background:pink; 
border:lpx solid gray; 


5 

-sectionStyle2( 
background:lightyellow; 
border:lpx solid gray; 

) 


<div id-"wrapper"» 
«div i header" class-"sectionStylel"»«/div» 
<div id-"secondary" class-"sectionStyle2"»«/div» 
«div id-"wrapperLeft"» 
«div id-"sidebar" class-"sectionStyle2"»«/div» 
«div id-"main" class-"sectionStyle2"»«/div^ 
«div id-"hack"»«/div» 


«/div» 
<div id-"footer" class-"sectionStylel"»«/div» 
«/div» 
效果 如 图 16-13 所 示 。 从 左 图 可 以 看 出 当 窗口 宽度 过 小 时 ， 页 面 宽度 则 保持 在 750px， 同 
时 有 横向 滚动 条 产生 。 右 图 展示 了 当 窗口 变 宽 时 ， 左 栏 和 中 栏 都 成 比例 地 扩大 ， 而 右 栏 宽度 保 
持 不 变 。 
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图 16-13 ”改进 的 三 行 三 列 流动 式 布局 


不 知道 读者 是 否 注意 到 ， 我 们 在 前 一 例 基础 上 修改 (X)HTML 代码 时 ， 将 #sidebar 和 
secondary 进行 了 位 置 互 换 , 本 例 中 #secondary 位 于 #wrapperLeft 之 前 ,那么 当初 能 不 能 让 #main 
和 #secondary 进行 互 换 ， 使 #secondary 位 于 其 后 呢 。 现在 就 来 试 一 下 ， 把 (X)HTML 代码 做 如 下 
修改 : 

«div id-"wrapper"» 
<div id-"header" class-"sectionStylel"»«/div» 
«div id-"wrapperLeft"» 


«div id-"sidebar" class-"sectionStyle2"»«/div» 
<div id-"main" class-"sectionStyle2"»«/div» 
«div id-"hack"»«/div» 

«/div» 

<div id-"secondary" class-"sectionStyle2"»«/div» 


«div id-"footer" class-"sectionStylel"»«/div» 
«/div» 


页 面 效果 如 图 16-14 HR, secondary 跑 到 下 面 去 了 。 前 面 提 到 过 ， 浮 动 元 素 脱离 文档 流 ， 
但 是 它 的 定位 是 基于 文档 流 的 ，#secondary 元 素 向 右 浮动 ， 但 是 它 不 能 “高 于 ”在 文档 流 中 的 
位 置 ， 应 该 位 于 #wrapperLeft 的 下 面 。 
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16-14 secondary 放置 在 #wrapperLeft 之 后 ， 它 跑 到 下 面 去 了 


假如 页 面 需要 元 素 满足 这 样 的 顺序 ， 我 们 又 该 如 何 让 它 正 常 显示 呢 ? 通过 CSS 的 负 边 距 
可 以 解决 这 个 问题 。 我 们 将 #wrapperLeft 的 样式 做 如 下 修改 : 
div#wrapperLeft{ 
margin-right:-210px; 
margin-bottom: 10px; 
float:left; 
width:100%; 


cM 
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现在 效果 如 图 16-15 所 示 。 


图 16-15 ”修改 之 后 的 页 面 效果 
fhwrapperLeft 的 margin-right 属性 由 210px 变 为 -210px, 我 们 给 它 设 定 了 一 个 负 边 距 , 同时 


让 它 向 左 浮动 , 这 使 得 在 #wrapperLeft 的 右 侧 空余 出 了 210px 宽 的 位 置 , 正好 能 容 下 #secondary， 
因此 #secondary 和 #wrapperLeft 位 于 同一 水 平 线 上 了 。 最 后 我 们 将 #wraperLeft 中 的 元 素 的 最 右 


端 向 左 移 进 210px， 我 们 将 创建 额外 的 div 容器 来 处 理 这 个 问题 。 完 整 的 代码 如 下 : 


div#wrapper{ 
min-width:750px; 
width:expression( (document .documentElement.clientWidth < 770)?750:'auto'); 

} 

div#header{ 
height:100px; 
margin-bottom:10px; 

} 

div#wrapperLeft{ 
margin-right:-210px; 
margin-bottom: 10px; 
float:left; 
width:100%; 

} 

div#contentLeft{ 
margin-right:210px; 

} 

div#sidebart{ 
float:left; 
width:19%; 
height:300px; 
margin-right:10px; 


H 

div#secondary{ 
float:right; 
width:198px; 
margin-bottom: 10px; 
height:400px; 

h 

divimain( 
float:left; 
width:78.4$; 
height:420px; 

) 

divifooter( 
clear:both; 
height:80px; 

) 

divihack( 
clear:both; 

) 

.sectionStylel( 
background:pink; 
border:lpx solid gray; 

) 

-sectionStyle2( 
background:lightyellow; 
border:lpx solid gray; 


<div id-"wrapper"» 
<div id-"header" class-"sectionStylel"»«/div» 
<div id-"wrapperLeft"» 
<div id-"contentleft"» 
<div id-"sidebar" class-"sectionStyle2"»«/div» 
<div id-"main" class-"sectionStyle2"»«/div» 
«div id-"hack"»«/div» 
</div> 
</div> 
<div id="secondary" class="sectionStyle2"></div> 
<div id-"footer" class="sectionStylel"></div> 
</div> 


页 面 效果 如 图 16-16 所 示 。 

为 了 限制 整个 页 面 的 宽度 , 我 们 给 #wrapper 添加 了 min-width 属性 , 但 TE 浏览 器 不 支持 这 
个 属性 ， 于 是 又 针对 IE 使 用 了 CSS 表达 式 ， 表 达 式 的 内 容 是 一 行 JavaScript 代码 ， 起 的 作用 
是 当 窗 口 宽度 小 于 770px 时 ，#wrapper 的 宽度 值 取 750px， 否 则 宽度 值 为 avto， 即 可 自动 适应 
浏览 器 窗口 的 宽度 。 本 书 第 17 章 会 介绍 有 关 CSS 表达 式 的 内 容 。 
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16-16 ”使 用 负 边 距 方 法 完成 页 面 布局 


Biola University 的 一 个 子 站 点 (http://www.biola.edu/undergrad/) 使 用 了 三 栏 流动 式 布局 ， 在 
- 定 范围 内 ， 页 面 中 间 的 三 个 栏目 的 宽度 均 是 可 变 的 ( 见 图 16-17)。 


16-17 Biola University 网 站 的 一 个 页 面 使 用 了 流动 式 三 分 栏 布局 
表示 三 个 栏目 的 XHTML 代码 如 下 : 
<div id="content"> 
<div id="homeWelcome">...</div> 
<div id="homeEvents">...</div> 
<div id="homeFeatures">...</div> 
</div> 


HP#homeWelcome 5ji£homeEvents 元 素 向 左 浮 动 ， 才 omeFeatures 向 右 浮 动 ， 且 三 者 的 宽 
度 值 均 是 百分数 。 页 面 最 外 层 的 容器 元 素 #wrapperPage 包含 了 如 下 样式 ， 使 得 页 面 宽 度 变 化 限 
定 在 一 定 范 围 内 : 

max-width:1000px; 

min-width:740px; 


由 于 IE 不 支持 这 两 个 属性 ， 设 计 者 通过 条 件 注 释 为 IE 添加 了 如 下 代码 : 


width:expression (document.body.clientWidth < 772 ? "740px" : 

document.body.clientWidth » 1032 ? "1000px" : "100$" ); 

width 的 属性 值 为 一 个 CSS 表达 式 ( 详 见 第 17 章 )， 它 的 含义 是 当 浏览 器 可 视 区 域 宽度 小 于 
772 个 像素 时 ， 宽 度 值 为 740px， 可 视 区 域 宽度 大 于 1032px 时 ， 宽 度 值 取 1000px， 其 他 情况 下 
宽度 值 为 100%. 

Vitamin(http://www.thinkvitamin.comy/) 网 站 在 局 部 区 域 也 运用 了 三 栏 式 的 布局 形式 ( 见 
图 16-18)， 当 浏览 器 宽度 小 于 1024 个 像素 的 时 候 ， 三 个 栏目 都 会 缩小 自身 的 宽度 以 适应 窗口 
的 变化 。 读 者 可 以 自行 分 析 网 站 的 页 面 结构 。 


16-18 Vitamin 网 站 在 局 部 使 用 了 流动 式 三 栏 式 布局 
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16.3.3 ”弹性 布局 


在 国内 ,很 少 有 网 站 采用 弹性 布局 的 方式 ， 国 内 大 部 分 用 户 也 很 少 使 用 浏览 器 提供 的 字体 
大 小 调整 功能 。 可 调整 的 字体 可 以 增强 网 页 的 可 阅读 性 ， 为 那些 视力 有 障碍 的 人 士 提供 方便 ， 
另外 网 站 也 能 体现 出 较 好 的 灵活 性 。 弹 性 布局 的 关键 在 于 ， 字 体 采用 百分数 或 者 以 em 为 单位 
的 长 度 值 ， 元 素 的 维度 值 单位 均 使 用 em， 当 字体 大 小 发 生变 化 时 ， 容 器 的 宽度 会 跟随 文字 一 

有 些 设计 者 对 使 用 em 作为 单位 来 布局 页 面 感到 不 适 ， 他 们 更 习惯 于 使 用 像素 作为 单位 ， 
觉得 它 能 更 精确 地 控制 页 面 效 果 。 下 面 我 们 来 详细 介绍 字体 大 小 与 单位 em 和 px 之 间 的 关系 ， 
相信 读者 在 阅读 完 本 小 节 内 容 之 后 就 不 再 那么 “惧怕 ”em 了 。 

第 5 章 讲 过 , 使 用 单位 em 的 值 是 该 元 素 font-size 属性 值 的 相对 值 。 但 是 ， 当 元 素 font-size 
属性 值 也 采用 em 作为 单位 时 ， 这 个 值 就 是 其 父 元 素 font-size 属性 值 的 相对 值 了 ， 这 时 它 与 百 
分 数 的 作用 是 相同 的 。 大 多 数 浏览 器 默认 的 字体 大 小 为 16px， 所 以 下 面 的 代码 将 body 元 素 内 
的 文字 大 小 设 为 16px: 

body(font-size:lem;] 

但 是 这 种 方式 在 IEG 中 会 存在 问题 ， 当 文字 大 小 从 正常 调整 为 较 大 时 ， 文 字 会 一 下 子 变 得 
很 大 。 我 们 使 用 百分数 作为 单位 就 可 以 避免 这 个 问题 : 

body{font-size:100%;} 

或 者 添加 如 下 代码 : 

html{font-size:100%;} 


设置 好 字体 大 小 后 ， 就 要 确定 容器 的 宽度 了 ， 假 如 要 创建 一 个 宽度 为 750px 的 页 面 ， 我 们 
需要 将 px 单位 转换 为 正确 的 em 单位 。 由 于 lem = 16px， 则 Ipx = 1/16em。 那 么 750px 相当 于 


1/16x750=46.875em。 
以 下 代码 展示 了 弹性 布局 页 面 的 基本 实现 方法 : 
html( 


font-size:100$; /* 解决 IE6 中 的 字体 变化 程度 过 大 的 问题 */ 
} 
body{ 

font-size:0.75em;  /* 0.75 x 16px = 12px */ 
H 
#wrapper{ 

width:46.875em; 

margin:0px auto; 
} 
#header{ 

height:7em; 

clear:both; 

margin-bottom: 10px; 


d*sidebar( 
width:19%; 
height:25em; 
float:left; 

$ 

#content{ 
width:79%; 
height:25em; 
float:right; 

} 

#footer{ 
margin-top:10px; 
height:6em; 
clear:both; 

} 

.sectionStylel{ 
background:pink; 


} 


<div id="wrapper"> 


«div id-"header" class="sectionStylel"> 顶 端 </div> 
«div id-"sidebar" class="sectionStylel"> 侧 栏 </div> 
«div id-"content" class="sectionStylel"> 主 要 内 容 </div> 
«div id-"footer" class="sectionStylel"> 底 脚 </div> 


«/div» 


效果 如 图 16-19 所 示 。 左 图 为 正常 文字 大 4 


\ 时 的 页 面 效果 ， 右 图 为 将 文字 设 为 较 大 后 的 
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CSS 禅 意 花 园 的 一 个 效果 (http://www.cssz 
布局 ( 见 图 16-20), 页 面 文字 的 字号 都 是 可 以 调节 的 ， 且 元 素 会 跟随 文字 一 起 变化 。 页 下 


16-19 ”弹性 布局 的 效果 


为 48em， 其 他 一 些 元 素 的 属性 也 都 采用 em 作为 单位 。 


engarden.com/?cssfile=/063/063.css) 中 使 用 了 弹性 


= 
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图 16-20 “CSS 禅 意 花园 "的 一 个 效果 中 使 用 了 弹性 布局 ( 左 为 正常 字体 ， 右 为 最 大 字体 ) 


È 提示 : ”为 了 使 弹性 布局 页 面 更 协调 ， 有 时 也 给 img 元 素 设置 相对 长 宽 值 。 根据 图 像 原始 
大 小 计算 出 对 应 的 采用 em 作为 单位 的 值 , 然后 通过 CSS 样式 赋 给 特定 的 图 像 即 
可 。 注 意 换算 单位 时 要 使 用 img 元 素 继承 下 来 的 字体 大 小 值 。 美 国 在 线 
(http://www.aol.comy) 页 面 中 的 标识 就 是 采用 这 种 方式 设计 的 。 


16.4 小 结 


本 章 介绍 了 网 页 中 常用 的 三 种 布局 方式 : 固定 式 、 流 动 式 和 弹性 布局 。 它 们 各 有 自己 的 优 
缺点 。 

固定 式 布局 页 面 宽度 固定 不 变 , 设计 者 可 完全 预期 页 面 的 效果 。 但 是 当 用 户 显示 设备 过 大 
时 ， 窗 口 会 出 现 大 量 的 空白 。 

流动 式 布局 的 页 面 宽度 随 着 浏览 器 窗口 进行 变化 ， 不 会 产生 空白 ， 空 间 利 用 率 高 。 但 当 浏 
览 器 过 小 或 者 过 大 时 ， 页 面 效 果 反 而 会 变 差 。 在 实际 开发 中 经 常 将 固定 式 和 流动 式 结合 在 一 起 
使 用 ， 当 窗口 宽度 超出 一 定 范围 时 ， 页 面 大 小 会 保持 固定 。 

弹性 布局 的 页 面 元 素 宽度 会 随 着 文字 大 小 进行 变化 ， 设 计 者 需要 将 像素 转换 为 em 作 单 位 
的 数值 。 弹 性 布局 提高 了 页 面 的 可 访问 性 ， 为 一 些 视力 有 障碍 的 人 士 提 供 了 方便 。 但 由 于 浏览 
器 默认 字体 大 小 可 更 改 ， 因 此 页 面 效果 也 会 变 得 不 可 预测 。 

本 章 实战 部 分 针对 不 同 的 布局 方式 提供 了 相应 的 解决 方案 , 并 介绍 了 负 边 距 在 布局 中 的 使 
用 ， 供 读者 参考 和 学 习 。 

接 下 来 将 进入 本 书 的 第 五 部 分 一 一 CSS 高 级 主题 ， 内 容 涉 及 CSS 在 XML、 打印 机 、 用 户 
界面 元 素 中 的 应 用 以 及 正 和 Firefox 对 CSS 的 扩展 。 


第 五 篇 “CSS 高 级 主题 


第 17 章 CSS 高 级 应 用 


CSS 除了 用 于 COHTML 外 ， 还 可 以 用 于 其 他 语言 ，XML 就 是 其 中 之 一 。 

本 章 首 先 介绍 有 关 XML 的 一 些 基 本 知识 ， 以 及 如 何 创建 一 个 XML 文档 (如 果 您 已 经 对 
XML 很 熟悉 ， 可 以 跳 过 此 部 分 继续 阅读 )。 接 着 介绍 如 何 向 XML 文档 添加 样式 、display 属性 
在 控制 XML 样式 中 的 作用 以 及 如 何 对 XML 文档 进行 布局 。 

网 页 除了 能 通过 浏览 器 显示 给 用 户外 ， 有 时 也 会 在 打印 机 上 进行 输出 。CSS 不 仅 能 控制 页 
面 在 显示 器 上 如 何 显 示 ， 也 能 控制 其 打印 输出 的 样式 。 本 章 将 介绍 如 何 使 用 CSS 控制 Web 页 
面 在 打印 机 上 输出 的 效果 。 

用 户 界面 元 素 涉及 了 鼠标 指针 、 系 统 颜 色 、 系 统 字体 以 及 轮廓 线 ， 本 章 将 向 读者 一 一 介绍 
与 这 些 内 容 相关 的 CSS 样式 属性 。 其 中 有 关系 统 字体 的 内 容 已 经 在 第 9 章 中 有 过 介绍 ， 本 章 
不 再 重复 。 

各 浏览 器 厂商 作为 CSS 规范 的 制定 者 ,不断 地 在 CSS 中 添加 新 的 特性 。 在 成 为 CSS 正式 
规范 之 前 ， 这 些 新 特性 都 已 经 在 一 些 浏览 器 中 得 到 支持 。 这 些 新 特性 使 Web 设计 人 员 能 轻松 
实现 各 种 特效 。 本 章 将 介绍 特定 于 正 与 Firefox 两 大 浏览 器 的 CSS 以 及 如 何 利 用 它们 创造 页 面 

本 章 主 要 内 容 


XML 的 基本 概念 

如 何 给 XML 文档 添加 样式 

display 属性 的 作用 

使 用 CSS 布局 XML 文档 中 的 元 素 

如 何 自 定义 图 标 

外 轮廓 线 的 使 用 

如 何 使 用 CSS 滤 镜 解决 PNG 图 像 的 透明 问题 
Mozilla 的 CSS 扩展 

Mozilla 扩展 中 的 属性 和 属性 值 
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17.1 CSS 在 XML 中 的 应 用 


17.1.1 XML 概述 


第 1 章 讲 到 XML 是 一 种 用 来 创建 其 他 语言 的 元 语言 ，XHTML 就 是 由 XML 构造 出 来 的 。 
熟悉 了 XHTML 之 后 就 不 难 理解 XML 了 。 本 节 将 会 介绍 一 些 有 关 XML 的 基础 知识 ， 读 者 若 
想 详细 了 解 XML， 请 参考 其 他 书籍 。 

1. 熟悉 XML 文档 

首先 来 看 如 下 这 段 代码 : 


<?xml version-"1.0" encoding="utf-8"?> 


«!-- some css books--» 
«library» 
Xbook id-"1"» 
«title»Beginning CSS Web Development«/title» 
«author»Simon Collisonc/author» 
</book> 
<book id="2"> 
<title>CSS: The Missing Manual </title> 
X«author»David Sawyer McFarland«/author» 
</book> 
<book id="3"> 
<title>CSS: The Definitive Guide</title> 
<author>Eric Meyer</author> 
</book> 
<book id="4"> 
<title>CSS Cookbook</title> 
<author>Christopher Schmitt</author> 
</book> 
</library> 


首先 ，XML 文档 由 声明 开始 : 

«?xml version-"1.0" encoding="utf-8"?> 

该 声明 指明 XML 的 版 本 以 及 所 使 用 的 字符 集 。 

接 下 来 是 一 行 注 释 ， 注 释 的 语法 与 (X)HTML 相同 : 

<!== some css books--> 

标记 <library> 表 明了 文档 的 根 元 素 ， 根 元 素 中 包含 了 儿 个 相同 的 book 元 素 ， 而 每 个 book 
元 素 都 包含 了 title 和 author 两 个 元 素 : 


cM 


«book id-"1"» 
«title»Beginning CSS Web Development«/title» 
X«author»Simon Collison«/author» 

X/book» 

book 元 素 有 个 id 属性 ，title 和 author 元 素 中 均 包 含 了 一 些 文本 。 

XML 文档 中 的 元 素 名 称 、 属 性 等 都 是 自 定义 的 ， 通 过 标记 名 称 可 以 很 容易 理解 文档 的 结 
构 和 内 容 。 这 是 XML 的 优势 之 一 ， 即 使 不 使 用 任何 注释 也 能 明白 它 描述 了 一 些 书籍 信息 ， 而 
且 很 容易 看 出 文档 中 各 元 素 间 的 关系 。 

2. XML 文档 的 结构 


XML 文档 由 两 部 分 组 成 : 序言 (Prolog) 和 文档 元 素 ( 即 根 元 素 )。 序言 包含 有 关 该 XML 文档 
的 一 些 信息 ， 类 似 于 (X)HTML 的 head 元 素 。 例 如 上 例 的 XML 文档 中 就 包含 了 一 个 XML 声 
明和 一 行 注 释 。 文 档 根 元 素 用 来 包含 可 能 有 的 其 他 内 容 ， 且 内 容 只 能 出 现在 文档 根 元 素 或 根 元 
素 的 内 部 。 上 例 中 的 library 就 是 根 元 素 。 

XML 中 的 元 素 、 标 记 、 属 性 等 概念 与 (X)HTML 相似 ， 这 里 不 做 过 多 的 介绍 。 但 需要 注意 
以 下 几 点 : 

© XML 中 所 有 元 素 均 要 有 起 始 标记 和 结束 标记 ， 元 素 需 正确 嵌 套 。 

e XML 中 只 能 包含 一 个 根 元 素 。 

© XML 区 分 大 小 写 。 

在 本 章 后 面 的 XML 示例 中 ， 只 给 出 文档 的 根 元 素 ， 会 省 略 如 下 XML 声明: 

<?xml version-"1.0" encoding-"gb2312"?» 

读者 在 练习 的 时 候 请 注意 ， 如 果 不 声明 相应 的 字符 集 ， 中 文 内 容 将 无 法 正常 显示 或 者 导致 
XML 解析 失败 。 


17.1.2 使 用 CSS 


1. XML 的 显示 

COHTML 中 每 个 元 素 的 含义 以 及 应 该 以 何 种 方式 显示 ， 浏 览 器 是 知道 的 ， 因 此 不 同 元 素 
会 以 特定 的 方式 显示 出 来 。XML 则 不 同 ， 元 素 完全 是 自己 定义 的 ， 浏 览 器 不 知道 该 如 何 处 理 
这 些 陌生 的 元 素 。 

图 17-1 为 浏览 器 对 17.1.1 小 节 中 XML 文档 的 显示 。 除 了 元 素 内 容 外 ，XML 声明 、 注 释 、 
表示 元 素 的 标记 和 元 素 中 属性 都 被 原封 不 动 地 显示 出 来 。 

2. 添加 样式 表 

XML 文档 只 能 使 用 外 部 样式 表 文 件 ， 在 XML 声明 之 后 插入 以 下 代码 就 可 以 为 XML 文档 
添加 样式 表 : 

«?xml-stylesheet type-"text/css" href-"styles.css" ?> 


type 属性 表明 这 是 一 个 CSS 文本 文档 ，href 属性 指明 了 文档 位 置 。 现 在 把 该 代码 添加 到 
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17.1.1 小 节 的 XML 文档 中 , 再 看 一 下 浏览 器 的 显示 效果 ( 见 图 17-2)， 即 使 没有 样式 文件 , 浏览 
器 的 显示 效果 也 发 生 了 改变 。 


<?xml version="1.0" encoding="utf-8" ?> 
<!-- some css books --> 
- dibrary» 
- «book id="1"> 
«title»Beginning CSS Web Development -/title 
«author»Simon Collison</author> 
«/book» 
- «book id="2"> 
«title»CSS: The Missing Manual</title> 
«author»David Sawyer McFarland </author> 
«/book» 
- «book id="3"> 
«title»CSS: The Definitive Guide </title> 
«author»Eric Meyer «/author» 
«/book» 
- «book id="4"> 
«titlie»CSS Cookbook -/title 
«author»Christopher Schmitt «/author» 
«jbook» 
«library» 


17-1 浏览 器 对 XML 文档 的 显示 


Beginning CSS Web Development Simon Collison CSS: The Missing Manual David 
Sawyer McFarland CSS: The Definitive Guide Eric Meyer CSS Cookbook 
Christopher Schmitt. 
图 17-2 添加 引用 样式 表 文件 的 代码 后 ， 浏 览 器 的 显示 效果 
在 后 面 的 范例 中 ， 引 用 样式 表 文 件 的 代码 会 省 略 ,读者 在 实际 练习 时 请 自行 添加 样式 表 文 
件 ， 并 引用 到 相应 的 XML 文档 中 。 
3. 选择 符 
CSS 通过 选择 符 可 以 控制 COHTML 文档 中 特定 元 素 的 样式 , 这 同样 适用 于 XML 文档 , 但 
需要 注意 的 是 id 选择 符 和 class 选择 符 不 会 对 XML 产生 效果 , 浏览 器 并 不 知道 XML 文档 元 素 
中 的 id 属性 和 class 属性 究竟 是 什么 含义 ， 因 为 XML 文档 中 属性 的 含义 同 元 素 名 称 一 样 ， 完 
全 是 自己 定义 的 。 除 非 使 用 文档 类 型 声明 (DTD) 或 者 XML 模式 (XML Schema) 将 id 属性 与 元 素 
的 这 对 应 上 。 


17.1.3 为 XML 文档 添加 样式 


1. display 属性 


使 用 display 属性 可 以 让 XML 元 素 以 某 种 特定 的 方式 显示 出 来 ， 比 如 属性 值 block 就 可 以 
让 XML 元 素 以 (X)HTML 中 块 级 元 素 的 显示 方式 显示 。 


2. 使 用 display:block 和 display:inline 设 定 元 素 的 基本 显示 方式 
使 用 display:block 或 display:inline 就 能 使 XML 元 素 以 (X)HTML 中 的 块 级 元 素 或 内 联 元 素 
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方式 显示 ， 如 同 div 和 span 元 素 一 样 。 请 看 示例 : 


<paragraph> 
这 是 一 个 段落 ， 里 面包 含 了 一 些 <important> 重 要 </important> 的 信息 。 
</paragraph> 


我 们 为 其 指定 如 下 样式 : 


paragraph{ 
display:block; 
padding:10px; 
border:lpx solid gray; 

} 

important{ 
display:inline; 
color:red; 
font-weight:bold; 

) 


paragraph 元 素 和 important 元 素 的 display 属性 分 别 设 为 block 和 inline, [El 17-3 为 显示 效 
它们 和 CY)HTML 中 的 p 元 素 和 em 或 strong 元 素 的 显示 效果 是 一 致 的 。 


m 


这 是 一 个 段落 ， 里 面包 含 了 一 些 重要 的 信息 。 


17-3 使 用 block 和 inline 属性 值 


3. 使 用 格式 化 表格 数据 

表格 式 的 数据 很 容易 在 (X)HTML 文档 中 显示 ， 使 用 table, tr. td 等 元 素 就 可 以 在 浏览 器 
中 显示 为 表格 。 那 么 我 们 如 何 处 理 XML 文档 中 的 表格 式 数 据 呢 ? display 属性 的 某 些 属性 值 可 
以 做 到 ， 它 们 专门 用 来 布局 表格 数据 ， 使 元 素 以 某 种 表格 元 素 的 样式 显示 。 

表 17-1 总 结 了 display 属性 中 与 表格 相关 的 属性 值 以 及 所 代表 的 含义 。 
表 17-1 与 表格 相关 的 display 属性 值 及 其 含义 


属性 值 & x 
table 定义 一 个 块 级 的 表格 ， 相 当 于 COHIML 的 table 元 素 
inline-table 定义 一 个 内 联 级 的 表格 
table-row 定义 表格 中 的 一 行 ， 相 当 于 COHIML ffl tr R 


table-row-group | 定义 包含 一 个 或 多 个 行 的 组 ， 相 当 于 COHTML 的 tbody 元 素 
table-header-group | 定义 包含 一 个 或 多 个 行 的 组 , 这 些 行 位 于 表格 的 头 部 , 相当 于 CGOHTIML 的 thead 元 素 
table-footer-group | 定义 包含 一 个 或 多 个 行 的 组 ， 这 些 行 位 于 表格 的 头 部 ， 相 当 于 COHTML 的 tfoot 元 素 


table-column 定义 一 列 单元 格 ， 相 当 于 COHIML 的 col 元 素 
table-column-group | 定义 包含 一 个 或 多 个 列 的 组 ， 相 当 于 COHIML 的 colgroup 元 素 
table-cell 定义 表格 中 的 一 个 单元 格 ， 相 当 于 (X)HTML 的 td 元 素 
table-caption 定义 表格 标题 


| 人 enne 


了 解 了 这 些 属性 值 的 含义 后 ， 我 们 就 可 以 对 包含 表格 式 数据 的 XML 文档 添加 样式 了 ， 请 
看 示例 : 


<document> 
<table> 
<tableHead> 
<tableRow> 
<tablecel1> 日 期 </tableCel1> 
«tableCell» X LR«/tableCell» 
«tableCell»Íffé«/tableCell» 
«/tableRow» 
«/tableHead» 
«tableBody» 
«tableRow» 
«tableCell»3 H 1 H«/tableCell» 
«tableCell» Kfl«/tableCell» 
<tableCel11> 北 京 - 罗马 </tableCel11> 
«/tableRow» 
«tableRow» 
«tableCell»3 H2 H«/tableCell» 
<tableCel1> 汽 车 </tableCell> 
<tableCel11> 罗 马 - 蒙特 卡 帝 尼 </tableCel11> 
«/tableRow» 


«/tableBody» 
«/table» 
«/document» 


添加 的 样式 代码 如 下 : 


document ( 
display:block; 
margin:l0Opx; 

} 

table( 
display:table; 
border:lpx solid #565656; 
border-collapse:collapse; 
font-size:12px; 
width:300px; 

l 

tableHead( 
display:table-header-group; 
font-weight:bold; 
background: #DFDFDF; 

} 

tableBody{ 
display:table-row-group; 

} 

tableRow{ 


display:table-row; 

} 

tableCell{ 
display:table-cell; 
border:lpx solid $565656; 
padding:6px; 

} 


除了 给 每 个 元 素 指定 display 属性 之 外 , 它 与 给 (X)HTML 文档 添加 样式 没有 区 别 。 如 图 17-4 
所 示 为 Firefox 浏览 器 的 显示 效果 ， 它 看 上 去 与 (X)HTML 的 表格 没什么 两 样 。 但 遗憾 的 是 IE 
浏览 器 不 支持 display 属性 中 表格 相关 的 属性 ， 因 此 TE. 的 显示 比较 混乱 。 


日 期 ”| 交通 工具 行程 

3BiB | 飞机 北京 -罗马 

30M0 | 汽车 罗马 -蒙特 卡 帝 尼 
3B3H | 汽车 蒙特 卡 帝 尼 - 威 尼斯 
3BH4B | 汽车 威尼斯 - 茵 斯 不 卢 克 -BER 
3BSB | 汽车 可 尼 黑 -法 兰 克服 
3H6H | 汽车 法 兰 克服 Gum 
3070 | 汽车 qms -日内瓦 
3HsH | 汽车 BAR -FFE 
3A90 | 汽车 PRE- CR 
3RHuB |W 巴黎 -北京 


17-4 使 用 display 表格 相关 的 属性 格式 化 表格 数据 (Firefox) 
4. 使 用 display:list-item 格式 化 列表 


最 后 一 个 display 属性 就 是 list-item T, 它 将 元 素 指定 为 一 个 列表 项 。CSS 与 列表 相关 的 属 
性 都 可 以 使 用 。 请 看 示例 : 


<document> 
<menu> 
<coffeeMenu> 
<menuTitle> 咖 啡 类 </menuTitle> 
<menuItem> 玛 塔 里 摩卡 </menuItem> 
<menuItem> 意 大 利 浓缩 </menuItem> 
<menuItem> 牙 买 加 蓝 山 </menuItem> 
</coffeeMenu> 
<teaMenu> 
<menuTitle> 茶 类 </menuTitle> 
<menuItem> 西 湖 龙 井 </menuItem> 
<menuItem> 莱 莉 花茶 </menuItem> 
<menuItem> 普 洱 茶 </menuItem> 
</teaMenu> 
«/menu» 
«/document» 
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现在 添加 如 下 样式 : 


document ( 


display:block; 
margin:1l0px; 
) 
menu, coffeeMenu, teaMenu, menuTitle( 
display:block; 
) 
menuItem( 
display:list-item; 
} 


item 元 素 的 display 属性 设 为 了 list-item，item 元 素 则 按照 列表 方式 显示 ， 浏 览 器 会 给 
COHTML 的 二 元 素 添加 项 目 符号 ， 对 于 该 item 元 素 也 是 如 此 ( 见 图 17-5)。 


咖啡 类 

. BEERE 
- EKIRA 
- 牙买加 蓝 山 
xz 

。 Piloto 
E 
. BES 


17-5 使 用 display:list-item 属性 
再 次 增加 如 下 样式 ， 进 一 步 美化 这 个 列表 : 


menu( 
background: £$F7EDD2; 
border:lpx solid $9A7452; 
width:120px; 
padding:8px; 
Ccolor:£633A15; 
font-size:12px; 

k 

coffeeMenu, teaMenu{ 
margin-bottom: 6px; 

} 

menuTitle{ 
font-weight:bold; 

5 

menuItem( 
line-height:1.6em; 
list-style-position:inside; 


} 
最 终 效果 如 图 17-6 所 示 。 


17-6 RAAR 


17.1.4 CSS 布局 


使 用 CSS 给 XML 元 素 进行 布局 与 布局 XHTML 的 原理 是 一 样 的 , 我 们 举 几 个 简单 的 示例 
来 说 明 如 何 使 用 CSS 布局 XML 元 素 。 


1. 默认 布局 


在 未 添加 任何 样式 之 前 ，XML 采用 默认 布局 方式 。 这 种 状态 下 ， 块 级 元 素 会 由 上 至 下 依 
次 排列 ， 内 联 元 素 会 从 左 向 右 依次 排列 ， 且 当 水 平 空间 不 足 时 产生 换行 。 


2. 浮动 
当 设 定 元 素 的 float 属性 时 ， 该 元 素 将 采取 浮动 定位 ， 其 他 元 素 会 在 其 周围 排列 。 例 如 ; 


«document» 
<notice> 这 是 一 个 浮动 的 元 素 。</notice> 
<paragraph> 
使 用 Css 的 float 属性 可 以 将 元 素 浮动 起 来 ， 非 浮动 元 素 中 的 内 容 会 排列 在 浮动 元 素 的 周围 。 
采用 浮动 定位 的 优势 之 一 在 于 ， 当 浮动 元 素 在 XML 文档 中 的 位 置 发 生变 化 时 ， 通 过 调整 Css 
代码 ， 页 面 效果 仍然 可 以 保持 一 致 
X/paragraph» 

«/document» 


样式 代码 : 


document{ 
display:block; 
margin:10px; 

paragraph( 
float:left; 
display:block; 
width:500px; 
padding:10px; 
border:lpx solid gray; 

H 

notice{ 
float:left; 


Es 
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width:100px; 
padding:10px; 


border:lpx solid gray; 
) 


以 上 代码 在 IE 浏览 器 中 效果 如 图 17-7 所 示 。 


使 用 CSs 的 eat 属 性 可 以 将 元 素 浮动 起 来 ， 非 浮动 元 素 中 的 内 容 会 排 
列 在 浮动 元 素 的 周围 。 采 用 浮动 定位 的 优势 之 一 在 于 ， 当 浮动 元 素 
ptu be PES SUR 通过 调整 CSs 代 码 ， 页 面 效果 仍 


图 17-7 浮动 XML 元素 
3. 相对 定位 


相对 定位 只 是 在 正常 定位 的 基础 之 上 增加 一 些 变化 。 元 素 首先 依照 正常 定位 方式 排列 ， 然 
后 根据 指定 的 值 进行 偏 移 。 请 看 示例 : 


«document» 
<paragraph> 这 是 一 个 段落 ， 里 面包 含 了 一 些 文字 ，<bias> 有 些 </bias> 文 字 的 位 置 有 偏 移 。 
</paragraph> 

</document> 


CSS 样式 为 : 


document ( 
display:block; 
margin:0 

} 

paragraph( 
display:block; 
border:lpx solid gray; 
padding:10px; 

} 

bias( 
display:inline; 
position:relative; 
bottom:6px; 
font-weight:bold; 

H 


bias 元 素 采 用 相对 定位 ， 并 设置 bottom 为 px， 这 表示 该 元 素 会 向 上 偏 移 6 个 像素 。 效 果 
如 图 17-8 所 示 。 


这 是 一 个 段落 ， 里 面包 含 了 一 些 文字 ， 有 些 文字 的 位 置 有 偏 移 。 


17-8 ”相对 定位 


4. 绝对 定位 


绝对 定位 的 元 素 将 彻底 从 文档 的 正常 排列 之 中 分 离开 。 它 的 位 置 基于 已 经 定位 的 祖先 元 素 
( 即 具 有 非 默认 定位 方式 的 最 近 的 父 元 素 )， 偏 移 值 通过 left, top. right 和 bottom 四 个 属性 来 确 
定 。 请 看 示例 : 


«document» 


«container» 
<box></box> 
</container> 
</document> 


样式 代码 : 


container( 
position:absolute; 
left:100px; 
top:50px; 
height:200px; 
width:300px; 
border:lpx solid gray; 
background:lime; 


box( 
position:absolute; 
top:l0px; 
left:20px; 
height:100px; 
width:100px; 
border:lpx solid gray; 
background: yellow; 


) 


图 17-9 Jy Firefox 的 显示 效果 。container 元 素 以 浏览 器 窗口 为 基准 产生 位 移 ， 而 box 元 素 
则 相对 其 父 元 素 container 进行 定位 。 
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17-9 绝对 定位 XML 元 素 (Firefox 浏览 器 ) 
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5. 固定 定位 
固定 定位 元 素 以 浏览 器 窗口 为 基准 进行 定位 ， 不 受 滚动 条 的 影响 。 注 意 正 不 支持 固定 定 
位 。 在 下 面 的 示例 中 ，title 将 被 设 为 固定 定位 ， 保 持 在 浏览 器 窗口 的 顶端 。 代 码 如 下 : 

<document> 

<title> 固 定 标题 </title> 

<paragraph> 文 本 文本 </paragraph> 

<paragraph> 文 本 文本 </paragraph> 

<paragraph> 文 本 文本 </paragraph> 

<paragraph> 文 本 文本 </paragraph> 


<paragraph> 文 本 文本 </paragraph> 
</document> 


样式 代码 如 下 : 


title( 
position:fixed; 
height:20px; 
padding:10px; 
background:black; 
color:white; 
font-size:20px; 
font-weight:bold; 


top:0; 

) 

paragraph( 
display:block; 


margin:l0px 0; 
padding:10px 0; 
font-size:18px; 
color:gray; 


} 
图 17-10 显示 了 Firefox 浏览 器 对 此 文档 的 显示 效果 。 固 定 定位 元 素 以 浏览 器 窗口 为 基准 
进行 定位 ， 即 使 滚动 条 发 生 移动 ， 固 定 定位 元 素 仍 保持 不 动 。 
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17-10 固定 定位 (Firefox 浏览 器 ) 


17.2 用 于 打印 的 CSS 


17.2.1 为 打印 媒介 指定 CSS 


除了 通过 浏览 器 查看 Web 页 面 外 ， 有 时 候 我 们 还 需要 将 页 面 内 容 进 行 打印 输出 。 比 如 一 
些 自动 化 办 公 系 统 就 向 用 户 提供 了 打印 数据 的 功能 。CSS 除了 可 以 控制 页 面 如 何在 浏览 器 中 显 
示 ， 还 可 以 控制 打印 输出 的 样式 。 打 印 输出 的 内 容 通常 与 浏览 器 的 显示 效果 不 同 ， 比 如 页 面 的 


导航 菜单 ， 背 景 颜色 和 图 像 都 不 会 被 打印 出 来 。CSS 
1. media 属性 
打印 机 和 显示 属于 不 同 的 显示 媒介 (Media), 为 了 


可 以 把 与 打印 无 关 的 内 容 排 除 在 外 。 


区 分 不 同 的 媒介 , COHTML 提供 了 media 


属性 ， 该 属性 可 用 于 link 元 素 或 者 style 元 素 。media 默认 属性 值 为 all， 表 示 样 式 将 用 于 包含 
显示 器 、 打 印 机 在 内 的 所 有 媒介 中 ， 属 性 值 print 则 可 指定 专门 用 于 打印 输出 的 样式 ， 比 如 : 


<link media-"print" type="text/css" rel="stylesheet" href-"print.css" /> 


或 者 : 


<style media-"print" type="text/css"> 


</style> 


属性 值 取 screen 则 表明 样式 将 用 于 显示 输出 。 通 过 media 属性 ， 我 们 就 能 为 同一 页 面 在 不 


同 的 媒介 上 指定 特定 的 样式 。 请 看 示例 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll 


1.0 Transitional//EN" 


-transitional.dtd"» 


<html xmlns-"http://www.w3.org/1999/xhtml"» 


<head> 


«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312" /> 


«title»style 元 素 的 media 属性 </title> 
<style type="text/css" media="screen"> 
pt 
padding:10px; 
width:300px; 
background: yellow; 
border:2px dotted gray; 
text-indent:2em; 
line-height:1.4em; 
b 
</style> 
<style type="text/css" media="print"> 
pt 
text-indent:2em; 
font-size:llpt; 


eM 


es) 
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«/style» 
</head> 


<body> 

<p> 使 用 (X) HTML 的 media 属性 就 可 以 实现 为 不 同 的 媒介 指定 特定 的 CSS 样式 。 media 默认 属性 值 为 
al1， 表 示 样 式 会 应 用 于 所 有 的 媒介 ， 包 括 显示 器 、 打 印 机 等 ， 属 性 值 screen 则 表示 样式 只 用 显示 器 ， 
print 表示 样式 将 会 应 用 于 打印 输出 。</p> 

</body> 

</html> 


以 上 代码 有 两 个 style 元 素 ， 每 个 style 元 素 指定 了 不 同 的 media 属性 值 ， 因 此 第 一 个 style 
元 素 中 的 样式 只 针对 显示 器 ， 而 第 二 个 style 元 素 只 针对 打印 机 。 图 17-11 和 图 17-12 分 别 为 浏 
览 器 上 的 显示 效果 和 打印 预览 中 的 打印 效果 。 


图 17-11 用 于 显示 器 的 CSS 样式 效果 
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17-12. 用 于 打印 机 的 CSS 样式 效果 (通过 IE 的 打印 预览 功能 查看 ) 


2. @media 规则 


除了 使 用 media 属性 外 ，CSS 提供 的 @media 规则 同样 可 以 为 样式 指定 不 同 的 应 用 媒介 。 
请 看 下 面 这 个 示例 : 
@media screen( 
pt 

width:300px; 
background: yellow; 
border:lpx solid red; 
text-indent:2em; 
padding:10px; 


cM 


} 
} 
@media print( 
pi 
width:300px; 
border:0.02cm solid gray; 
text-indent:2em; 


) 


<p> 使 用 (X) HTML ff] medi a 属性 就 可 以 实现 为 不 同 的 媒介 指定 特定 的 CSS ÉR. media 默认 属性 值 为 
al1， 表 示 样 式 会 应 用 于 所 有 的 媒介 ， 包 括 显示 器 、 打 印 机 等 ， 属 性 值 screen 则 表示 样式 只 用 显示 器 ， 
print 表示 样式 将 会 应 用 于 打印 输出 。 除 此 之 外 ，Ccss 提供 的 emedia 规则 同样 可 以 为 样式 指定 不 同 的 


应 用 媒介 。</p> 
这 次 ， 针 对 不 同 的 CSS 样式 分 别 放 在 不 同 的 @media 规则 下 ， 图 17-13 和 图 17-14 分 别 为 
显示 器 和 打印 预览 的 显示 效果 。 


17-13 media 规则 为 screen 的 样式 效果 
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17-14 @media 规则 为 print 时 的 样式 效果 


3. @import 规则 的 媒介 限制 
前 面 讲 过 ，CSS 的 @import 规则 可 以 在 CSS 文件 中 导入 其 他 外 部 的 CSS 样式 文件 ， 通 过 
在 该 规则 后 添加 媒介 限制 可 以 将 不 同 的 外 部 样式 应 用 到 不 同 的 媒介 中 ， 比 如 : 


Qimport url(screen.css) screen; 
Gimport url(print.css) print; 


© 注意 : 正 浏览 器 对 @import 规 则 支持 不 够 完善 , 它 无 法 导入 带 有 媒介 限制 的 外 部 样式 文 
件 。 因 此 可 利用 这 一 点 为 非 TE 浏览 器 添加 特定 的 样式 。 


eB 
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17.22 分 页 处 理 


当 打 印 一 份 文档 时 ， 其 内 容 可 能 会 占用 多 个 页 面 ， 而 浏览 器 的 显示 是 连续 的 ， 没 有 页 的 概 
念 。 在 打印 文档 时 ， 我 们 希望 能 够 控制 如 何 分 页 ， 比 如 让 标题 独占 一 个 页 面 。CSS 提供 了 
page-break-before 和 page-break-after 用 来 控制 分 页 , 它们 允许 的 属性 值 为 : auto、always、avoid、 
left 和 right， 默 认 值 为 autos 
auto 值 表 示 元 素 前 后 不 强制 设置 分 页 方式 ， 打 印 机 会 根据 内 容 多 少 自动 控制 分 页 。always 
表示 元 素 前 后 均 设置 分 页 。 
在 下 面 的 示例 中 , 页 面 提供 了 某 产 品 的 使 用 手册 , 当 打 印 时 希望 使 用 手册 的 标题 作为 封面 ， 
其 余 内 容 要 另 起 一 页 : 
<hl class="mainTitle"> 使 用 手册 </h1> 
<h2> 一 基本 功能 的 使 用 方法 </h2> 
<ul> 
<1i> 开 机 和 关机 </1i> 
<1i> 设 置 的 基本 操作 </1i> 
<1i> 文 件 的 基本 操作 </1i> 
<1i> 如 何 充电 </1i> 


</ul> 
CSS 代码 如 下 : 


@media print( 
hl.mainTitle( 
text-align:center; 
font:60pt "黑体 "; 
letter-spacing:0.6em; 
page-break-after:always; 
margin-top:6cm; 


font-size:18pt; 


font-size:l6pt; 
line-height:1.5em; 


样式 代码 设 定 标题 内 容 之 后 强制 分 页 。 通 过 打印 预览 可 以 看 到 如 下 效果 ( 见 图 17-15). 

属性 值 left 和 right 表示 元 素 需 独 自 占用 左 侧 或 右 侧 页 面 。 假 如 我 们 都 想 让 使 用 手册 中 每 一 
部 分 的 标题 打印 在 右 侧 的 页 面 ， 则 可 添加 如 下 样式 : 

n2 ( 


page-break-before:left; 
page-break-after:always; 


17-15 ”使 用 手册 四 个 字 后 面 的 内 容 被 放 到 下 一 页 


这 样 ， 当 h2 元 素 之 前 的 元 素 位 于 左 侧 页 面 时 ，h2 的 内 容 将 会 从 右 侧 页 面 开 始 显示 ; 如 果 
h2 之 前 的 元 素 也 位 于 右 侧 页 面 ， 那 么 h2 元 素 将 会 显示 在 下 一 个 右 侧 的 页 面 上 ， 中 间 会 空 出 一 
个 左 侧 页 面 。 

属性 值 avoid 正好 和 always 相反 ， 它 要 求 该 元 素 与 前 后 元 素 之 间 不 产生 分 页 。 但 是 浏览 器 
对 此 也 只 能 尽力 而 为 ,假如 元 素 后 面 跟随 着 一 张 很 大 图 像 ， 则 浏览 器 不 得 不 将 此 图 像 放置 在 下 

-个 页 面 中 显示 。 

除了 page-break-before 和 page-break-after 属性 外 ，CSS 还 提供 了 一 个 page-break-inside 属 
性 ， 它 的 属性 值 只 有 auto 和 avoid， 默 认 值 为 auto。avoid 表示 尽量 不 要 在 元 素 之 间 产 生 分 页 ， 
同样 ， 浏 览 器 只 是 尽 最 大 努力 保证 不 在 元 素 之 间 产 生 分 页 。 

CSS 用 于 控制 分 页 的 属性 只 是 针对 具有 分 页 效果 的 媒介 , 对 显示 器 的 显示 效果 不 会 产生 任 
何 影响 。 


17.3 BARATA 


17.3.1. 鼠标 指针 


当 使 用 桌面 应 用 程序 时 ， 不 同 鼠 标 指针 的 样式 通常 代表 着 不 同 的 软件 行为 ， 比 如 在 输入 框 
中 的 鼠标 指针 和 调整 窗口 大 小 时 的 鼠标 指针 就 具有 不 同 的 样式 。 假 如 读者 使 用 过 Photoshop 之 
类 的 图 像 处 理 软件 ， 会 发 现 程序 提供 了 丰富 的 鼠标 指针 样式 (比如 笔 刷 、 橡 皮 控 等 ) 来 表示 当前 
的 用 户 操 作 。 然 而 ， 在 开发 Web 应 用 程序 时 ， 鼠 标 指针 却 经 常 被 忽略 。 如 果 能 根据 使 用 环境 
来 改变 鼠标 指针 的 样式 ， 对 于 增强 Web 页 面 的 交互 性 、 改 善 用 户 体验 ， 都 是 大 有 帮助 的 。 
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1. cursor 属性 


CSS 中 的 cursor 属性 可 以 控制 页 面 中 鼠标 的 指针 样式 。 表 17-2 总 结 了 规范 中 定义 的 鼠标 
指针 以 及 它们 的 含义 。 
表 17-2 cursor 属性 值 的 含义 


属性 值 含 义 
auto 浏览 器 决定 鼠标 指针 样式 
crosshair 十 字形 鼠标 指针 
default 默认 鼠标 指针 样式 
Pointer 表示 链接 的 鼠标 指针 
move 表示 移动 的 鼠标 指针 


表示 某 一 方向 的 边 将 要 移动 ， 前 级 表示 了 边 的 方向 ， 比 如 e 表示 east, MA 
侧 。sw 表示 south west 为 左下 方 


e-resize, ne-resize, nw-resize, 
n-resize, se-resize, sw-resize, 


s-resize, W-resize 


text 表示 可 选择 文本 ， 通 常 为 竖 型 指针 
wait 表示 程序 忙 ， 需 要 等 待 ， 通 常 为 沙漏 或 表 
hel 当前 对 象 有 相应 的 帮助 信息 ， 通 常 为 问号 
ess 表示 程序 后 台 正 在 进行 处 理 ， 通 常 为 默认 指针 和 沙漏 的 组 合 


图 17-16 展示 了 Windows 系统 中 不 同 鼠标 指针 的 样式 。 


gis crosshair 

R default 

* pointer 

中 move 

e e-resize w-resize 
e ne-resize sw-resize 
^ nw-resize se-resize 
1 n-resize s-resize 

I text 

x wait 

R? help 

RE progress 


图 17-16 cursor 属性 值 对 应 的 鼠标 指针 样式 (Windows 系统 ) 
当 给 元 素 添加 鼠标 指针 样式 后 ,只 要 访问 者 将 鼠标 移 到 该 元 素 上 , 鼠标 指针 就 会 按照 cursor 
属性 设 定 的 样式 进行 显示 。 请 看 示例 : 
div{ 
font-size:12px; 


font-family:"Times New Roman", "宋体 "，serif; 
J 
div.section{ 
width:200px; 
border:lpx solid #035F30; 
$ 
div.header{ 
cursor:move; 
padding: 4px; 
font-weight:bold; 
background: #EAF6F0; 
border-bottom: lpx solid #035F30; 
H 
div.body{ 
padding:4px; 
line-height:1.4em; 
background: #FAFAFA; 
) 


<div class-"section"» 
«div class="header"> 天 气 预 报 </div> 
<div class="body"> 
晴 <br /> 
最 高 气温 : 25 度 <br /> 
最 低 气温 : 13 度 <br /> 
风力 : 1-2 级 
«/div» 
«/div» 


以 上 代码 设计 了 一 个 可 移动 的 天 气 预报 板块 ， 当 用 户 鼠 标 移 至 标题 上 时 ， 按 下 鼠标 可 以 移 
动 整个 板块 (可 通过 JavaScript 实现 )。 为 了 让 用 户 体验 到 移动 功能 的 存在 ， 需 要 将 标题 区 域 的 
鼠标 指针 样式 设 为 move， 表 示 拖 动 该 区 域 会 产生 移动 效果 。 图 17-17 显示 了 代码 的 效果 。 


17-17 将 鼠标 指针 样式 设 为 move 


图 17-17 WA TE 浏览 器 ， 我 们 发 现 只 有 当 鼠 标 指针 位 于 文字 上 方 时 ， 指 针 样 式 才 会 发 生 
改变 ， 否 则 还 是 默认 样式 。 而 在 Firefox 浏览 器 中 ,只 要 鼠标 位 于 该 div 元 素 区 域 中 ， 指 针 都 会 
成 为 移动 的 样式 。 为 了 解决 TE 存在 的 问题 , 需要 给 该 div 元 素 设 定 确切 的 宽度 值 ,于 是 添加 如 
下 声明 ; 


width:192px; 


宽度 设 为 192px， 再 加 上 左右 填充 各 有 4px， 一 共 200px， 和 父 元 素 的 宽度 一 致 。 现 在 的 效 
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果 如 图 17-18 所 示 ， 鼠 标 指针 在 div 内 任何 区 域 都 能 改变 样式 了 。 


B 
最 高 气温 : 25 度 
TETUR: 13 度 
风力 : 1-208. 


图 17-18 添加 确定 的 宽度 之 后 ， 鼠 标 指针 能 在 div 元 素 任何 区 域内 显示 为 移动 样式 


2. 非 标准 的 扩展 cursor 属性 值 
前 面 介绍 的 鼠标 指针 均 是 Css 规范 中 定义 的 ， 除 此 之 外 ， 还 有 一 些 非 标准 的 属性 值 ， 它 
们 绝 大 部 分 可 用 于 Windows 平台 下 的 Firefox A IE 浏览 器 中 。 表 17-3 包含 了 这 些 非 标准 的 属 


性 值 及 其 含义 。 


hand 
all-scroll 
col-resize 
IOW-resize 
no-drop 
not-allowed 


vertical-text 


3k 17-3. cursor 扩展 属性 值 含义 


手 型 指针 

表示 全 方向 可 滚动 的 指针 
调整 列 宽度 时 的 指针 
调整 行 高 度 时 的 指针 
表示 不 可 访问 的 指针 
表示 不 允许 的 指针 
表示 竖 型 文本 的 指针 


图 17-19 展示 了 以 上 扩展 属性 值 在 Windows 平台 下 对 应 的 鼠标 指针 样式 。 


* hand 

«$^ al-scroll 
col-resize 
row-resize 
no-drop 
not-allowed 


IOoddt*( 


vertical-text 


图 17-19 扩展 鼠标 指针 样式 (Windows 系统 ) 


如 果 你 的 网 页 只 针对 Window 平台 下 使 用 正 和 Firefox 浏览 器 的 用 户 ， 就 可 以 大 胆 地 使 用 


这 些 非 标准 的 扩展 属性 值 。 
3. 自 定 义 指针 样式 


除了 指针 样式 关键 字 外 ，cursor 属性 值 还 可 以 是 一 个 URL， 可 使 用 该 URL 所 指向 的 图 像 
作为 鼠标 指针 。Firefox 支持 PNG, GIF 和 JPEG 等 格式 的 图 像 作为 鼠标 指针 ， 而 TE 则 只 支持 


Windows 平台 下 专用 的 鼠标 指针 文件 (后 级 为 cur)。 不 是 所 有 浏览 器 都 支持 自 定义 鼠标 ， 为 了 
兼容 这 些 浏览 器 ， 需 要 在 URL 后 再 添加 一 个 标准 的 指针 关键 字 。 请 看 示例 : 
div( 
cursor:url(images/arrow.gif), default; 
width:200px; 
height:100px; 
border:lpx solid gray; 
) 


«div»«/div» 


图 17-20 73 Firefox 浏览 器 中 的 效果 ， 在 div 元 素 区 域 中 ， 鼠 标 指针 将 变 为 自 定义 的 图 像 。 
不 支持 自 定义 鼠标 指针 样式 的 浏览 器 则 会 按照 default 值 显 示 默 认 的 样式 。 


» 


图 17-20 Firefox 浏览 器 中 使 用 GIF 格式 图 像 作 为 鼠标 指针 样式 


4. Mozilla 扩展 中 的 鼠标 指针 样式 
Mozilla 扩展 提供 了 一 系列 的 样式 规则 ,它们 只 适用 于 Firefox 浏览 器 ,并 不 属于 CSS 标准 
规范 (实际 上 一 部 分 已 经 被 提交 至 W3C， 推 荐 作为 CSS3 的 标准 属性 ， 但 是 采纳 的 属性 名 称 会 
有 变化 。 后 面 将 会 详细 介绍 Mozilla 的 CSS 扩展 )。Mozilla 扩展 中 的 名 称 均 以 “-moz” 开 头 。 
表 17-4 总 结 了 Mozilla 扩展 中 提供 的 指针 样式 名 及 其 含义 。 
表 17-4 Mozilla 扩展 提供 的 鼠标 指针 样式 属性 值 和 含义 


含义 
表示 将 要 创建 一 个 对 象 的 别名 或 快捷 方式 
表示 将 要 选择 一 个 或 一 组 单元 格 
表示 指针 所 指 的 对 象 包含 右键 菜单 
表示 将 要 复制 一 个 对 象 


属性 值 
-moz-alias 
-moz-cell 


-moz-context-menu 


-moz-co 
-moz-grab 表示 将 要 抓 取 一 个 对 象 
-moz-grabbing 表示 正在 抓 取 一 个 对 象 
-moz-spinning 表示 浏览 器 正在 后 台 进 行 处 理 
-moz-zoom-in 表示 将 要 放大 某 对 象 
-Inoz-zoom-out 表示 将 要 缩小 某 对 象 


图 17-21 展示 了 Windows 平台 下 各 个 关键 字 所 对 应 的 指针 样式 。 
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17.3.2 ”系统 颜色 


区 -moz-alias 

wy -moz-cell 

N -moz-context-menu 
区 -moz-copy 

D -moz-grab 

n -moz-grabbing 

RE -moz-spinning 

& -moz-zoom-in 

& -moz-zoom-out 


17-21 Mozilla 扩展 提供 的 鼠标 指针 样式 (Windows 系统 ) 


除了 可 以 使 用 颜色 关键 字 和 RGB 值 改变 元 素颜 色 外 , CSS 还 提供 了 若干 系统 颜色 关键 字 ， 
可 使 页 面 的 色彩 效果 能 与 访问 者 的 系统 的 完全 一 致 。 如 果 某 系统 中 没有 关键 字 所 对 应 的 颜色 ， 
则 该 颜色 将 被 赋予 一 个 与 其 最 为 接近 的 颜色 值 或 默认 值 。 表 17-5 总 结 了 这 些 关 键 字 以 及 它们 
所 代表 的 含义 。 注 意 ， 关 键 字 是 不 区 分 大 小 写 的 ， 但 是 将 每 个 单词 首 字母 大 写 有 助 于 提高 代码 


的 可 阅读 性 。 
175 系统 颜色 关键 字 
关键 字 含义 
ActiveBorder 活动 窗口 的 边框 
ActiveCaption 活动 窗口 的 标题 
AppWorkspace 多 文档 界面 中 的 背景 颜色 
Background 桌面 的 背景 颜色 
ButtonFace 三 维 元 素 的 正面 的 颜色 
ButtonHighlight 三 维 元 素 的 高 光 部 分 的 颜色 (面向 光源 的 边 的 颜色 ) 
ButtonShadow 三 维 元 素 的 阴影 部 分 的 颜色 
ButtonText 按钮 上 文本 的 颜色 
CaptionText 标题 中 文本 的 颜色 
GrayText 灰 度 颜色 (表示 禁用 )， 
Highlight 控件 中 选中 项 的 颜色 
HighlightText 控件 中 选中 项 的 文本 颜色 
InactiveBorder 非 活动 状态 窗口 的 颜色 
InactiveCaption 非 活动 状态 窗口 的 标题 颜色 
InactiveCaptionText 非 活动 状态 窗口 的 标题 文本 颜色 
InfoBackeground 工具 提示 (tooltip) 的 背景 颜色 


关键 字 含义 


InfoText 工具 提示 的 文本 颜色 


Menu 


菜单 背景 色 


MenuText 菜单 中 文本 的 颜色 


Scrollbar 滚动 条 中 灰色 区 域 的 颜色 
ThreeDDarkShadow 三 维 元 素 的 深 色 阴影 部 分 的 颜色 
ThreeDFace 三 维 元 素 的 正面 的 颜色 
ThreeDHighlight 三 维 元 素 的 高 光 部 分 的 颜色 


ThreeDLightShadow 三 维 元 素 的 向 光 部 分 的 颜色 (面向 光源 的 边 的 颜色 ) 


ThreeDShadow 三 维 元 素 的 阴影 部 分 的 颜色 


Window 窗口 背景 的 颜色 


WindowFrame 窗口 边框 的 颜色 


WindowText 窗口 文本 的 颜色 


请 看 下 面 这 个 示例 : 


body( 


) 


background:Background; 


ul( 


) 


background-color:Menu; 

width:60px; 

padding:6px 10px; 

margin:0; 

border-top:lpx solid ThreeDHighlight; 
border-left:lpx solid ThreeDHighlight; 
border-right:lpx solid ThreeDDarkShadow; 
border-bottom:lpx solid ThreeDDarkShadow; 


ul li( 


) 


color:MenuText; 
font:menu; 
list-style:none; 


«ul» 


«/ul» 


以 上 代码 分 别 给 页 面 背景 色 、ul CREAREA li 元 素 文字 颜色 指定 为 系统 的 桌面 颜色 、 菜 


单 


ETSI 


Hx 


用 了 深 色 阴影 的 颜色 。1i 元 素 中 font 属性 为 menu， 还 记得 这 是 什么 含义 吗 ? 在 第 9 章 我 们 讲 


<1i> 打 开 文件 </1i> 
<1i> 关 闭 文件 </1i> 
<1i> 保 存 文件 </1i> 
<1i> 退 出 系统 </1i> 


色 和 菜单 文本 的 颜色 。ul 元 素 的 左 侧 和 上 侧 边 框 颜色 使 用 高 光 颜色 ， 右 侧 和 下 侧 边 框 使 
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过 ，font 属性 也 可 以 使 用 若干 表示 系统 字体 属性 的 关键 字 ，menu 的 含义 是 使 用 系统 菜单 文本 
的 字体 属性 。 图 17-22 为 代码 的 效果 (该 效果 在 读者 的 计算 机 上 可 能 会 有 差异 , 因为 系统 颜色 是 
可 以 自行 设置 的 )。 


17-22 ”使 用 系统 颜色 ( 左 图 为 使 用 Windows 经 典 主题 ， 右 图 使 用 了 Windows XP 的 银色 主题 ) 


17.3.3 轮廓 线 


有 时 ，Web 设计 者 希望 为 按钮 、 活 动 的 表单 元 素 添加 一 个 轮廓 线 (Outline)， 用 来 突出 显示 
它们 。 轮 廓 线 也 是 经 常 被 忽略 的 界面 元 素 ， 适 当地 使 用 它 可 以 提高 应 用 程序 的 易 用 性 ， 增 强 用 
户 体验 。 轮 廓 线 与 边框 的 不 同 之 处 在 于 以 下 两 个 方面 : 

e ”轮廓 线 不 占用 任何 空间 (不 影响 元 素 的 大 小 )。 

e ”轮廓 线 可 以 不 是 矩形 的 。 

CSS 提供 了 outline-color、outline-style、outline-width 以 及 一 个 简写 的 outline 属性 来 控制 
元 素 的 轮廓 线 样式 。 

outline-color 属性 可 接受 所 有 表示 颜色 的 属性 值 , 此 外 还 可 使 用 invert 关键 字 , 它 表示 将 轮 
廓 线 区 域 下 面 的 颜色 进行 反 转 。outline-style 可 使 用 除 hidden 外 所 有 border-style 所 使 用 的 属性 
值 。outline-width 可 用 的 属性 值 与 border-width 属性 的 属性 值 完全 一 致 。outline 属性 为 简写 形 
式 ， 可 同时 包含 三 个 样式 属性 。 


.图 注意 : 四 个 方向 的 轮 廊 线 样式 是 一 致 的 , 这 一 点 与 边框 不 同 , CSS 中 没有 “outline-left” 、 
“outline-top” 一 类 的 属性 。 

现在 来 看 一 个 示例 : 

input( 
width:120px; 
height:14px; 
padding:3px 4px 4px 3px; 
border:lpx solid gray; 
margin:3px; 

b 

input.current( 
outline:lpx solid invert; 
background: #EDEDED; 

i; 


<input class-"current" type="text" tabindex-"1" /><br /> 
<input type="text" tabindex-"2" /> 


NI 


图 17-23 为 Firefox 浏览 器 中 的 效果 (IE 浏览 器 不 支持 轮廓 线 属性 )。invert 属性 值 将 原来 的 
白色 反 转 为 黑色 。 


IE | 
[= 


图 17-23 outline 属性 的 使 用 
假如 我 们 的 页 面 背景 颜色 指定 为 黑色 ， 则 轮廓 线 自动 反 转 为 白色 ( 见 图 17-24)。 


17-24 invert 属性 值 会 自动 反 转 原 始 颜色 


17.4” 滤 镜 与 转 场 


滤 镜 (Filter) 与 转 场 (Transition) 是 IE 浏览 器 所 特有 的 ， 不 属于 CSS 的 标准 规范 ， 但 是 正 浏 
览 器 有 着 相当 高 的 市 场 占有 率 ， 使 用 滤 镜 和 转 场 能 快速 有 效 地 实现 某 些 页 面 特效 。 

本 节 将 介绍 滤 镜 和 转 场 的 基本 概念 和 部 分 属性 的 使 用 方法 , 有 关 滤 镜 的 完整 信息 可 参考 微 
软 的 msdn 网 站 : 

http://msdn2.microsoft.com/en-us/library/ms532853(VS.85).aspx 

滤 镜 和 转 场 都 是 通过 CSS 的 filter 属性 来 赋值 的 , 注意 这 个 属性 不 是 CSS 规范 中 的 标准 属 
性 ， 只 是 作为 IE 浏览 器 的 扩展 存在 。filter 属性 中 包含 滤 镜 的 描述 和 该 滤 镜 所 能 使 用 的 属性 。 
添加 滤 镜 的 语法 规则 如 下 : 


filter: progid:DXImageTransform.Microsoft.filtername (SProperties) 


17.4.1 程序 生成 面 


所 谓 程序 生成 面 (Procedural Surface) 是 指 存 在 于 元 素 内 容 与 元 素 背 景 之 间 一 个 假想 的 界 
面 。 在 界面 区 域内 ， 每 个 像素 的 颜色 值 和 透明 度 都 可 以 动态 改变 。 本 小 节 介绍 的 两 个 滤 镜 都 作 
用 于 程序 生成 面 上 ， 并 不 影响 元 素 本 身 。 

1. AlphalmageLoader 

AlphaImageLoader 滤 镜 可 以 在 元 素 内 容 与 背景 之 间 添 加 图 像 ， 同 时 对 图 像 进行 剪裁 和 改变 
大 小 操作 。 这 个 滤 镜 也 可 用 来 解决 PNG 格式 图 像 无 法 在 正 中 实现 透明 效果 的 问题 。 

在 下 面 这 个 示例 中 ， 我 们 通过 此 滤 镜 添加 一 幅 图 像 : 


| 2 
网 页 布局 开发 指南 
{ 


P 
width:200px; 
background:#99FF99; 
padding:10px; 
color:red; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( 
src-"images/scene.jpg", sizingMethod-'scale'); 
} 


<p> 使 用 AlphaImageLoader 滤 镜 可 以 给 元 素 动态 添加 图 像 。 图 像 被 加 在 元 素 内 容 和 元 素 背 景 之 间 。 

</p> 

效果 如 图 17-25 HR, sre 属性 指定 的 图 像 被 添加 在 元 素 背景 之 上 ，sizingMethod 属性 指定 
了 图 像 要 根据 元 素 大 小 进行 缩放 。 


图 17-25 使 用 AlphalmageLoader 滤 镜 添加 图 像 


接 下 来 ,我们 通过 该 滤 镜 为 元 素 增加 PNG 格式 的 图 像 ， 这 时 PNG 图 像 的 透明 信息 能 正常 
显示 ， 从 而 可 作为 正 下 PNG 图 像 的 无 法 透明 问题 的 解决 方案 : 
div( 
float:left; 
width:200px; 
height:160px; 
margin:lOpx; 
background:green; 
) 
div£&pngHackForIE6( 
filter: progid:DXImageTransform.Microsoft.AlphalmageLoader( 
enabled-"true", src-"images/test transparent.png"); 


) 


«div id-"pngInIE6"»«img src-"images/test transparent.png" /»«/div» 

«div id-"pngHackForIE6"»«/div» 

以 上 代码 效果 如 图 17-26 HR, 左 侧 的 图 像 是 作为 img 元 素 插 入 的 , PNG 透明 区 域 显示 为 
灰色 ， 右 侧 图 像 是 通过 AlphaImageLoader 滤 镜 添加 的 ， 具 有 透明 效果 。 


© 注意 : 使 用 AlphaImageLoader 泪 镜 的 元 素 中 如 果 包 含 链接 和 表单 元 素 ， 则 它们 会 失去 
其 原 有 的 功能 ， 不 能 响应 用 户 的 任何 操作 。 解决 办 法 是 在 使 用 该 滤 镜 的 元 素 中 再 
添加 一 个 新 元 素 作 为 容器 ， 并 给 新 元 素 添加 声明 position:relative， 则 链接 和 表单 
的 功能 可 恢复 正常 。 怪 不 得 有 人 说 IE fi) dE T. 


图 17-26 使 用 AlphalmageLoader 滤 镜 解决 IE6 无 法 正确 显示 PNG 透明 效果 的 问题 


2. Gradient 
Gradient 滤 镜 可 在 元 素 背景 与 内 容 之 间 添 加 颜色 ,确定 颜色 的 透明 度 以 及 是 否 有 渐变 效果 。 
属性 startColorstr 与 endColorstr 用 来 设 定 颜色 渐变 的 开始 色彩 和 结束 色彩 。 例 如 : 


pt 
padding:6px 0 4px 5px; 
height:100$; /* needed for filter */ 
font-size:l2px; 
border:lpx solid #999999; 
filter:progid:DXImageTransform.Microsoft.gradient( 
startColorstr-"£11000000", endColorstr-"$44000000", 
GradientType-"0"); 
) 


<p> 使 用 Gradient 滤 镜 可 以 给 元 素 动态 添加 颜色 。 颜 色 可 拥有 透明 度 和 渐变 效果 。</p> 

注意 到 表示 颜色 的 字符 串 格 式 为 #AARRGGBB, 后 面 的 RRGGBB 和 CSS 中 的 颜色 格式 一 
致 ， 分 别 代表 红 、 绿 、 蓝 三 种 颜色 值 ， 前 面 的 AA 表示 透明 程度 ，00 为 完全 透明 ，FF 为 完全 
不 透明 。 代 码 的 效果 如 图 17-27 所 示 。 


17-27 ”使 用 Gradient 滤 镜 实现 渐变 效果 


174.2 静态 滤 镜 


所 有 的 滤 镜 和 转 场 本 质 上 都 是 滤 镜 ， 都 是 通过 filter 属性 将 效果 应 用 到 元 素 上 的 。 本 节 介 
绍 的 静态 滤 镜 是 指 滤 镜 所 产生 的 效果 是 静止 不 动 的 。 


1. Alpha 
Alpha 滤 镜 可 以 将 元 素 内 容 设置 为 透明 ，opacity 属性 决定 了 元 素 的 透明 程度 。 例 如 : 


div#background{ 
background:url(images/backwall.jpg); 
width:200px; 
height:120px; 


eB 
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div#inner{ 
width:80px; 
padding: 8px; 
background:yellow; 
filter:progid:DXImageTransform.Microsoft.Alpha (opacity-"40"); 
$ 


«div id="background"><div id="inner"> 此 元 素 内 容 具 有 半 透 明 效果 。</div></div> 
效果 如 图 17-28 所 示 。 


17-28 Alpha 滤 镜 可 使 元 素 内容 呈 现 半 透明 效果 
2. Blur 
Blur 滤 镜 能 使 元 素 产生 模糊 效果 ，pixelradius 属性 可 设 定 模糊 的 程度 。 例 如 : 
img#blur{ 


filter:progid:DXImageTransform.Microsoft.Blur(pixelradius-"6"); 


) 


<img src-"images/scene.jpg" /> 
<img id-"blur" src-"images/scene.jpg" /> 


图 17-29 中 右 侧 的 图 像 使 用 了 Blur 滤 镜 。 


17-29 Blur 滤 镜 可 使 元 素 产生 模糊 效果 
3. DropShadow 


DropShadow 滤 镜 可 给 元 素 添 加 投影 效果 ， 投 影 的 颜色 、 方 向 、 偏 移 量 都 可 以 调节 。 
例如 : 


imm 


imgt 
filter:progid:DXImageTransform.Microsoft.DropShadow( 


offX-"6", offY-"6", color-"gray", positive-"true"); 


«img src-"images/scene.jpg" /» 


图 17-30 为 阴影 效果 。 


17-30 DropShadow 滤 镜 为 元 素 添加 投影 
4. Emboss 和 Engrave 


Emboss 和 Engrave 滤 镜 分 别 产生 浮雕 和 雕刻 的 效果 ， 图 像 将 以 灰 度 方式 显示 。 
5. Glow 


Glow 滤 镜 会 在 元 素 周围 增加 发 光 效 果 ， 发 光 颜 色 和 发 光 区 域 的 大 小 都 可 以 设置 。 
例如 : 


body{ 
background:gray; 


pt 

width:100px; 

height:40px; 

color:white; 

background:orange; 

text-align:center; 

padding-top:20px; 
filter:progid:DXImageTransform.Microsoft.Glow( 

color-"yellow", strength-"10"); 


<p> 发 光 效果 </p> 
在 如 图 17-31 所 示 的 效果 中 ， 黄 色 的 部 分 就 是 滤 镜 产生 的 发 光 效 果 。 
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图 17-31 Glow 滤 镜 产生 的 发 光 效果 


6. Shadow 

Shadow 滤 镜 和 DropShadow 滤 镜 的 效果 差不多 ， 但 它 产生 的 阴影 会 有 渐变 的 效果 ， 请 看 
示例 : 

img{ 


filter:progid:DXImageTransform.Microsoft.Shadow( 
direction-"135" color-"gray", strength-"10"); 
) 


«img src-"images/scene.jpg" /» 


效果 如 图 17-32 所 示 。 


17-32 Shadow 滤 镜 产生 的 阴影 效果 


174.3 转 场 


转 场 实 际 上 也 是 滤 镜 , 它 一 般 结合 脚本 (比如 JavaScripb 一 起 使 用 , 可 产生 动态 变化 的 效果 。 

1. Barn 

Bam 转 场 会 产生 一 种 开关 门 的 效果 。 请 看 示例 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"» 

<html xmlns-"http://www.w3.org/1999/xhtml"» 

<head> 

«meta http-equiv-"Content-Type" content-"text/html; charset-gb2312" /> 


«title»Untitled Document«/title» 
«script language-"javascript" type-"text/javascript"» 
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var bToggle = 0; 
function fnToggle() ( 
oDiv.filters[0].Apply(); 
if (bToggle) ( 
bToggle - 0; 
oDiv.style.backgroundColor-"gold";] 
else ( 
bToggle - 1; 
oDiv.style.backgroundColor-"blue";) 
oDiv.filters[0].Play(); 
5 
</script> 
<style type="text/css"> 
div#oDiv{ 
height:200px; 
width:200px; 
background-color: gold; 
filter:progid:DXImageTransform.Microsoft.Barn( 
duration-"1", motion-"out"); 
} 
</style> 
</head> 


<body> 

<button onclick-"fnToggle()"»Barn 转 场 </button><br /><br /> 
«div id-"oDiv"»«/div» 

</body> 

</html> 


我 们 给 出 了 XHTML 的 完 
Apply 和 Play 方法 ， 从 而 可 产 


代码 ， 其 中 包含 一 段 JavaScript 代码 ， 代 码 中 执行 了 滤 镜 的 
动态 变化 的 效果 。 单 击 按钮 会 产生 动画 效果 ( 见 图 17-33)。 


pats 


17-33 Barn 转 场 效果 


其 余 转 场 的 使 用 方式 与 此 类 似 ， 不 再 举例 说 明 。 最 后 我 们 介绍 一 个 Pixelate 滤 镜 ， 它 可 以 
作为 静态 滤 镜 单独 使 用 。 


ee 
COPS 
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2. Pixelate 
Pixelate 滤 镜 可 将 元 素 进行 像素 化 处 理 ， 请 看 下 面 的 示例 : 


img#imagel{ 
filter:progid:DXImageTransform.Microsoft.Pixelate (maxSquare-"4"); 

} 

img#image2{ 
filter:progid:DXImageTransform.Microsoft.Pixelate (maxSquare-"16"); 

) 

imgfimage3( 
filter:progid:DXImageTransform.Microsoft.Pixelate (maxSquare-"38"); 

} 


<img id-"imagel" src-"images/scene.jpg" /> 
<img id-"image2" src-"images/scene.jpg" /> 
<img id-"image3" src-"images/scene.jpg" /> 


三 幅 图 像 分 别 赋予 了 不 同 的 像素 化 程度 ， 效 果 如 图 17-34 所 示 。 


17-34 Pixelate 产生 不 同 的 像素 化 效果 


17.5 behavior 属性 与 CSS 表达 式 


17.5.1 behavior 属性 


behavior 属性 可 以 为 元 素 添加 行为 ， 它 的 属性 值 是 一 个 URL， 指 向 一 个 表示 行为 的 资源 或 
者 行为 名 。 有 人 通过 behavior 属性 解决 了 PNG 图 像 在 IE 中 的 透明 显示 问题 。 具 体 做 法 是 : 编 
写 一 个 HTC(HTML Component, HTML 组 件 ) 文 件 ， 在 其 中 添加 JavaScript 脚本 ， 给 页 面 所 有 
img 元 素 、 任 何 元 素 的 背景 图 以 及 CSS 添加 的 背景 图 设置 AlphaImageLoader 滤 镜 ， 然 后 再 给 
特定 的 元 素 添加 behavior 属性 ， 将 这 个 组 件 导 入 到 页 面 中 。 比 如 : 

img, div(behavior: url(iepngfix.htc)) 

当然 也 可 以 给 所 有 元 素 增加 该 属性 : 

* {behavior: url (iepngfix.htc)} 


HTML 组 件 是 实现 DHTML 行为 的 一 种 方式 ,通过 behavior 属性 就 可 以 将 行为 引入 到 页 面 中 。 


全 延伸 有关 使 用 behavior 属性 和 HTML 组 件 解 决 下 的 PNG 问题 的 内 容 ， 请 参考 : 
http://www.twinhelix.com/css/iepngfix 
有 关 HTML 组 件 的 内 容 请 参考 : 
http://www.w3.org/TR/INOTE-HTMLComponents 


17.5.0 CSS 表达 式 


CSS 表达 式 (CSS Expression) 是 从 IES 开始 引入 的 ， 允 许 在 CSS 属性 值 中 使 用 JavaScript 
表达 式 ， 它 只 适用 于 DE 浏览 器 。 属 性 值 由 表达 式 和 其 后 括号 中 的 脚本 代码 组 成 ， 脚 本 代码 的 
结果 会 返回 给 该 属性 。 在 下 面 这 个 示例 中 ，div 元 素 的 宽度 由 表达 式 的 计算 结果 来 确定 ， 它 的 
宽度 总 是 浏览 器 窗口 宽度 的 一 半 : 

div( 

height:80px; 
background: yellow; 
width:expression(document.body.clientWidth / 2); 


) 


<div> 通 过 css 表达 式 设置 本 元 素 宽度 为 浏览 器 窗口 宽度 的 一 半 。</div> 
图 17-35 为 代码 的 效果 。 


图 17-35 使 用 CSS 表达 式 设置 元 素 宽度 为 浏览 器 窗口 宽度 的 一 半 


出 于 对 性 能 的 考虑 ， 一 些 开发 者 不 推荐 使 用 CSS 表达 式 。 因 为 表达 式 的 执行 频率 远 比 想 
象 中 的 高 ， 不 但 当 页 面 加 载 时 表达 式 需 要 执行 ， 而 且 当 窗 口 大 小 发 生变 化 时 ， 浏 览 器 滚动 条 产 
生 移动 时 ， 或 是 当 用 户 将 鼠标 指针 移 到 页 面 上 时 ， 表 达 式 都 需要 重新 计算 。 解 决 办 法 是 改 用 
JavaScript 脚本 对 元 素 样式 进行 控制 ， 以 避免 由 CSS 表达 式 带 来 的 性 能 问题 。 


17.6 微软 对 CSS 的 扩展 


17.6.1. 控制 滚动 条 外 观 


IE 5.5 及 其 后 续 版 本 支持 通过 CSS 改变 浏览 器 和 textarea 元 素 的 滚动 条 的 外 观 ， 这 些 CSS 


属性 包括 scrollbar-3dlight-color、 scrollbar-arrow-color、 scrollbar-base-color、 scrollbar-darkshadow- 
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color、scrollbar-face-color、scrollbar-highlight-color、scrollbar-shadow-color 以 及 scrollbar-track- 
color。 这 些 属性 的 属性 值 可 以 是 任何 有 效 的 CSS. 颜色 值 。 

需要 注意 的 是 , 深 动 条 的 外 观 属性 只 有 在 页 面 不 包含 任何 文档 类 型 声明 时 才 会 起 作用 ， 因 
此 目前 很 少 有 人 使 用 它 。 对 于 那些 使 用 Flash 技术 制作 的 页 面 ， 文 档 类 型 声明 的 作用 不 是 很 重 
要 。 为 了 实现 页 面 的 一 臻 性、 增强 美观 程度 ， 还 是 可 以 使 用 滚动 条 外 观 属性 的 。 如 图 17-36 所 
示 为 Vabien Decoree(http://www.idecoree.com) 公 司 的 页 面 ， 其 中 滚动 条 的 样式 与 页 面 整体 风格 
搭配 和 谐 ， 实 现 了 外 观 的 统一 。 


[Em 


图 17-36 Vabien Decoree 的 网 站 使 用 滚动 条 外 观 属性 
下 面 是 相关 的 CSS 代码 : 


body{ 
scrollbar-face-color:#d0d0c9; 
scrollbar-highlight-color:#cccccc; 
scrollbar-shadow-color:#8a8d7a; 
scrollbar-3dlight-color:#ffffff; 
scrollbar-arrow-color:#8a8d7a; 
scrollbar-track-color:#ecede7; 
scrollbar-darkshadow-color:#f5f5f5; 


17.6.2 ”缩放 功能 


zoom 属性 可 用 来 对 内 容 放大 或 缩小 。zoom 属性 值 可 以 是 浮上 点数、 百分数 或 者 是 关键 字 
normal， 比 如 150% 表 示 为 原来 的 1.5 倍 ， 关 键 字 normal 则 表示 元 素 正 常 大 小 。 通 常 zoom 属性 
可 结合 脚本 语言 应 用 ， 产 生 一 些 有 趣 的 效果 ， 请 看 下 面 这 个 示例 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 
«html xmlns-"http://www.w3.0rg/1999/xhtml"» 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>zoom 属性 </title> 
<script language-"javascript" type="text/javascript"> 
window.attachEvent ("onload", function(){ 
var pl = document.getElementById ("pl"); 
pl.attachEvent ("onmouseover", function (event) { 
event.srcElement.style.zoom = "200$"; 
DE 
pl.attachEvent ("onmouseout", function (event) { 
event.srcElement.style.zoom = "normal"; 
n: 
n; 
</script> 
<style type="text/css"> 
pt 
padding:10px; 
border:lpx solid gray; 
) 
«/style» 
</head> 


<body> 

«p id="p1l"> 请 移动 鼠标 到 这 里 。</p> 
</body> 

</html> 


在 以 上 代码 中 ，JavaScript 脚本 的 作用 是 为 p 元 素 增加 两 个 事件 处 理 函数 ， 当 鼠标 指针 移 
到 p 元 素 之 上 时 ，onmouseover 事件 触发 ， 这 时 把 p 元 素 的 zoom 属性 设置 为 200%， 而 当 鼠 标 


指针 离开 p 元 素 时 ，onmouseout 事件 触发 ，zoom 属性 被 设 为 normal， 即 原始 大 小 。 这 样 就 实 
现 了 一 种 放大 文字 的 效果 (如 图 17-37 所 示 )。 


| 请 移动 鼠标 到 这 里 。 


请 移动 鼠标 到 这 里 。 


17-37 zoom 属性 实现 放大 效果 


& EIR: ”读者 可 以 访问 微软 的 msdn 网 站 获取 更 多 有 关 微软 CSS 扩展 的 信息 (扩展 属性 会 
注 有 “This property is a Microsoft extension to CSS”)， 网 址 如 下 : 
http://msdn.microsoft.com/en-us/library/ms531205(vs.85).aspx 
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17.7 Mozilla 扩展 


与 微软 对 CSS 扩展 类 似 ，Mozilla 扩展 (Mozilla Extension) 也 是 对 CSS 属性 的 一 种 扩展 ， 
它 只 适用 于 Firefox 浏览 器 (本 小 节 示 例 均 使 用 Firefox 浏览 器 进行 展示 ), 扩展 中 的 所 有 名 称 均 
以 “-moz” 开 头 。 扩 展 提供 了 at 规则 、 属 性 、 属 性 值 、 伪 元 素 和 伪 类 等 。 除 了 可 以 完成 一 些 
CSS 标准 属性 的 功能 外 ， 还 可 以 为 XUL(XML User-interface Language) 等 其 他 类 型 语言 提供 样 
式 支 持 。 


17.7.1 at 规则 


前 面 我 们 接触 过 一 些 at 规则 ， 比 如 @media、@import。 
Mozilla 扩展 中 也 提供 了 一 个 at 规则 : @-moz-document， 这 个 规则 可 以 将 样式 限定 于 特定 
URL 下 的 页 面 。 比 如 : 
@-moz-document url(http://www.huistd.com/), 
url-prefix(http://bbs.huistd.com/), 
domain (huistd.com) 


t 
body(color:purple; background:yellow;] 


} 

通过 设 定 @-moz-document， 上 面 的 CSS 规则 只 用 于 满足 如 下 条 件 的 页 面 : 

@ http://www.huistd.com/ 所 指向 的 页 面 。 

e 任何 以 “http:Wbbs.huistd.com/” 开 头 的 URL 所 指 的 页 面 。 

€ ”任何 以 “huistd.com” 为 主机 的 URL 或 以 “.huistd.com” 结 束 的 URL 所 指向 的 页 面 。 


17.7.2 ARMATA 


Mozilla 扩展 提供 了 比 CSS 标准 中 更 为 丰富 的 伪 类 和 伪 元 素 ， 这 里 挑选 其 中 的 一 部 分 来 举 
例 说 明 。 
1. :-moz-list-bullet 伪 类 
:-moz-list-bullet 伪 类 可 用 来 编辑 元素 的 标记 ， 例 如 : 
ul.ext li:-moz-list-bullet( 
font-size:30px; 


color:yellow; 


} 


<ul> 
<1i> 列 表 项 1</1i> 
<1i> 列 表 项 2</1i> 


<1i> 列 表 项 3«/1i» 
«/ul» 
«ul class-"ext"» 
<1i> 列 表 项 1«/1i» 
<1i> 列 表 项 2</1i> 
<1i> 列 表 项 3</1i> 
</ul> 
第 二 个 列表 项 的 标记 大 小 为 30px， 颜色 为 黄色 。 在 讲 列表 时 提 到 ,列表 项 标记 的 样式 和 该 
列表 项 中 文字 的 样式 一 致 ， 使 用 这 个 伪 类 可 以 给 文字 和 标记 提供 不 同 的 样式 。 效 果 如 图 17-38 
所 示 。 
* 列表 项 1 


. 列表 项 2 
. 列表 项 3 


* 列表 项 1 
^ 列表 项 2 
^ 列表 项 3 
17-38 ”使 用 :-moz-list-bullet 伪 类 调整 列表 项 标记 样式 
2. :-moz-first-node 和 :-moz-last-node 伪 类 
:-moz-first-node 和 :-moz-last-node 伪 类 将 分 别 匹配 这 样 的 元 素 : 该 元 素 是 其 父 元 素 的 第 一 
(Node) 以 及 该 元 素 是 其 父 元 素 的 最 后 一 个 子 结 点 。 
i 示例 : 


span( 
display:block; 


T 


请 


} 

span:-moz-first-node{ 
border:lpx solid gray; 

} 

span:-moz-last-node( 
font-weight:bold; 
font-size:1.2em; 


} 


<div> 
<span> 此 span 元 素 为 div 元 素 的 第 一 个 子 结 点 。</span> 
<span> 中 间 的 span 元 素 。</span> 
<span> 中 间 的 span 元 素 。</span> 
<span> 此 span 元 素 为 div 元 素 的 最 后 一 个 子 结 点 。</span> 


«/div» 


作为 div 元 素 的 第 一 个 子 结 点 与 最 后 一 个 子 结 点 的 span 元 素 被 设 定 了 不 同 的 样式 。 效 果 如 
图 17-39 所 示 。 
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号 span 元 素 为 dv 元 素 的 第 一 个 子 结 点 。 
中 间 的 span 元 素 。 
中 间 的 span 元 素 。 
此 span 元 素 为 div 元 素 的 最 后 一 个 子 结 点 - 


图 17-39 :-moz-first-node 和 :-moz-last-node 伪 类 的 应 用 


17.7.3 属性 


1. 更 改元 素 背 景区 域 范围 
CSS 规范 中 规定 元 素 背 景区 域 的 大 小 为 边框 外 围 的 大 小 , 也 就 是 说 边框 会 覆盖 一 部 分 背景 
区 域 。-moz-background-clip 属性 可 指定 背景 区 域 的 范围 ， 属 性 值 padding 表示 背景 区 域 以 填充 
外 侧 为 准 ， 请 看 示例 : 
div( 
border:8px dashed black; 
background-color:yellow; 


width:100px; 
margin:lO0px; 
padding:10px; 
float:left; 

$ 

div.clip { 


-moz-background-clip:padding; 


<div> 背 景区 域 从 边框 位 置 开 始 </div> 
«div class="clip"> 背 景区 域 从 填充 位 置 开始 </div> 


效果 如 图 17-40 所 示 。 


17-40 ”使 用 -moz-background-clip 属性 更 改 背 景区 域 范 围 


2. 圆 角 效果 
-moz-border-radius 属性 可 用 来 给 元 素 添加 圆 角 效果 ， 请 看 示例 : 


div.roundCorner( 
border:2px solid gray; 
width:200px; 
height:200px; 
-moz-border-radius:12px; 
} 


<div class="roundCorner"></div> 


效果 如 图 17-41 所 示 ， 右 图 为 将 圆 角 放大 后 的 效果 ， 可 以 看 出 圆 角 含有 锯齿 。 


17-41 创造 圆 角 效 果 


3. 透明 效果 
5j IE 的 Alpha 滤 镜 类 似 ，Mozilla 提供 了 -moz-opacity 属性 用 来 控制 元 素 的 透明 程度 。 此 
属性 已 经 被 CSS3 规范 支持 ， 属 性 名 称 为 opacity，Firefox 同样 支持 这 个 属性 。 例 如 : 


div#background{ 
background:url (images/backwall.jpg); 
width:200px; 
height:120px; 

) 

div#inner{ 
width:80px; 
padding:8px; 
background:yellow; 
opacity:0.4; 

) 


«div id-"background"»«div id="inner"> 此 元 素 内 容 具 有 半 透 明 效果 。</div></div> 


效果 如 图 17-42 所 示 ， 与 正 的 Alpha 滤 镜 产生 的 效果 是 一 致 的 。 


17-42 {EA opacity 属性 实现 半 透 阴 效果 


4. 添加 外 轮廓 线 
-moz-outline 属性 可 以 在 元 素 的 边框 外 侧 再 添加 一 层 轮 廓 线 。 轮 廓 线 的 风格 、 颜 色 、 宽 度 、 
与 边框 之 间 的 距离 (通过 -moz-outline-offset 修改 ) 以 及 是 否 需 要 圆 角 (通过 -moz-outline-radius 修 
改 ) 都 可 以 控制 。 请 看 示例 : 
div.outline{ 
width:100px; 
height:100px; 
padding:10px; 
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margin:20px; 
border:6px solid blue; 
-moz-outline: 10px solid red;  /* 宽度 风格 颜色 */ 
-moz-outline-radius:6px; /* 圆 角 大 小 */ 
-moz-outline-offset:5px; /* 偏 移 量 */ 

} 


«div class="outline">div 元 素 </div> 


以 上 代码 将 产生 如 图 17-43 所 示 的 效果 。 


itk 


图 17-43 ”给 元 素 增加 外 轮廓 线 
5. 焦点 、 选 择 与 输入 
下 面 将 要 介绍 的 属性 会 影响 页 面 文本 或 控件 的 行为 ，-moz-user-input 属性 可 设 定 元 素 是 否 
接受 输入 ，-moz-user-select 属性 可 决定 用 户 是 否 可 以 选择 元 素 中 的 内 容 。 比 如 下 面 的 示例 中 ， 
用 户 无 法 选择 p 元 素 内 的 文本 ， 无 法 向 文本 框 中 输入 任何 内 容 : 


p.noSelect( 
-moz-user-select:none; 


) 
input.noInput( 
-moz-user-input:disabled; 


) 


«p class="noSelect"> 这 里 的 文本 将 无 法 选择 </p> 
«input class-"noInput" type="text" value=" 这 里 将 无 法 输入 文本 "”/> 


17.74 ”属性 值 


1. display 属性 值 

display 属性 规定 了 元 素 的 显示 方式 ，Mozilla 扩展 中 的 包含 了 一 些 display 属性 值 。 前 面 说 
过 Firefox2 不 支持 CSS 标准 中 的 inline-block 属性 值 ， 可 以 使 用 Mozilla 扩展 中 的 -moz-inline- 
block 来 实现 同等 效果 。 

2. 表示 颜色 的 关键 字 

颜色 关键 字 的 使 用 能 够 优化 CSS 代码 的 结构 ， 如 果 希 望 页面 某 些 元 素 的 颜色 和 链接 的 文 


字 颜 色 一 致 ， 那 么 就 可 以 使 用 属性 值 -moz-hyperlinktext， 这 样 元 素 的 颜色 就 和 链接 文字 的 颜色 
“ 绑 定 ”在 一 起 。 如 果 链 接 文字 的 颜色 变 了 ， 那 么 该 元 素 的 颜色 也 会 随 之 更 改 ， 从 而 减少 了 修 
改 工作 。 

3. 文本 对 齐 


在 正中 text-align 属性 不 仅 影响 直接 包含 文本 的 元 素 的 对 齐 方式 ， 也 影响 其 他 类 型 的 元 素 
(比如 div. img 等 ) 的 对 齐 方式 。 但 是 Firefox 中 的 text-align 属性 只 能 控制 类 似 p、span 一 类 直 
接 包含 文本 的 元 素 的 对 齐 方式 ， 而 对 于 其 他 元 素 只 能 利用 margin 属性 进行 控制 (参见 盒 模型 部 
分 的 相关 内 容 )。 比 如 : 
body{ 
text-align:center; 

} 

div( 
width:300px; 
border:lpx solid gray; 

) 


<p> 在 Firefox 中 ， 本 行文 本 居中 对 齐 </p> 
<div><p> 在 Firefox 中 ， 本 行文 本 不 居中 对 齐 。</p></div> 


下 面 看 看 在 Firefox 浏览 器 中 的 显示 效果 ( 见 图 17-44)。 


X9 e C D teowesweowerweswo 


|. Untitled Document. a 


在 Firefox 中 ， 本 行文 本 居中 对 齐 


| 在 Firefox 中 ， 本 行文 本 不 居中 对 齐 。 


Done iare: 
17-44 text-align 属性 对 div 一 类 元 素 不 起 作用 
Mozilla 扩展 针对 text-align 属性 提供 了 三 个 属性 值 : -moz-left、-moz-center 和 -moz-right， 
使 用 这 些 属性 值 就 可 以 控制 其 他 任何 元 素 的 对 齐 方式 。 
假如 我 们 将 以 上 代码 做 如 下 修改 : 


body{ 
text-align:-moz-center; 


H 
则 div 元 素 也 会 居中 对 齐 ， 效 果 如 图 17-45 所 示 。 


PE 
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Untitled Document - Mozilla Firefox 
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在 Firefox 中 ， 本 行文 本 居中 对 齐 


在 Frefox 中 ， 本 行文 本 不 居中 对 齐 。 


图 17-45 使 用 扩展 属性 -moz-center 后 ，div 元 素 可 实现 居中 对 齐 
4. 控制 颜色 


Mozilla 扩展 中 提供 了 两 个 添加 颜色 的 函数 ， 分 别 是 -moz-hsla 和 -moz-rgba， 它 们 的 用 法 
如 F: 

@  -moz-hsla(hue, saturation, lightness, alpha) 

@  -moz-rgba(red, green, blue, alpha) 

第 一 个 函数 中 的 参数 含义 依次 是 色调 、 饱 和 度 、 亮 度 和 透明 度 ， 前 3 个 参数 确定 了 颜色 ， 
最 后 一 个 确定 了 颜色 的 透明 程度 。 多 数 读者 可 能 对 这 种 控制 颜色 的 方式 不 了 解 ， 我 们 借助 
Photoshop 软件 中 的 调 色 板 来 进行 讲解 ( 见 图 17-46)。 


水 平方 向 为 饱 
和 度 ， 竖 直方 向 
为 亮度 


H, S, B 分 别 表 示 色 调 、 
饱和 度 和 亮度 


C &[s0 % 
c e [i53 
C e [s: 

C g [204 
a [se33cc 


T^ Only Web Colors. 


17-46 Photoshop 的 调 色 板 


色调 (Hue) 是 区 分 不 同色 彩 的 名 称 。 我 们 常 说 的 红色 、 蓝 色 等 就 是 最 基本 的 色彩 名 称 。 色 


调 取 值 范围 为 0-359。 饱 和 度 (Saturation) 是 指 颜色 的 纯正 程度 ， 饱 和 度 越 高 色彩 越 纯 ， 饱 和 度 
越 低 则 颜色 越 接近 灰色 。 饱 和 度 取 值 范围 为 0%~100%。 亮 度 (Lightness) 表 示 颜 色 的 明亮 程度 ， 
取 值 从 0% 到 10096. 

第 2 个 函数 中 的 参数 依次 是 红色 、 绿 色 、 蓝 色 和 透明 度 。 

目前 Firefox2 还 不 支持 透明 度 的 显示 。 

请 看 示例 : 


div( 
height:100px; 
width:180px; 
n 
diviédivl( 
background:-moz-hsla(199, 85$, 93$, 100); 
} 
div#div2{ 
background:-moz-rgba(234, 33, 99, 100); 
} 


«div id="div1"></div> 
<div id="div2"></div> 


效果 如 图 17-47 所 示 。 


17-47 mozilla 扩展 中 的 颜色 函数 


@ 延伸 :目前 ，Mozilla 扩展 中 的 部 分 属性 已 被 提交 至 W3C， 作 为 CSS3 规范 中 的 标准 属 
性 。 读者 可 以 通过 以 下 网 址 了 解 更 多 关于 Mozilla 扩展 的 信息 : 
http://developer.mozilla.org/en/docs/CSS Reference:Mozilla Extensions 


17.8 i\ 结 


本 章 介绍 了 一 些 CSS 的 高 级 开发 应 用 ， 内 容 包 括 CSS 在 XML 文档 中 的 应 用 、CSS 如 何 
控制 打印 机 的 输出 、CSS 和 用 户 界面 元 素 、 滤 镜 、CSS 表达 式 、 微 软 和 Mozilla 对 CSS 的 扩展 。 

XML 是 一 种 灵活 、 健 壮 的 标记 语言 。 一 个 XML 文档 包含 序言 和 文档 元 素 两 部 分 ， 序言 部 
分 的 XML 文档 声明 指明 文档 的 版 本 、 字 符 集 信息 。 XML 文档 只 允许 有 一 个 根 元 素 , 所 有 内 容 
均 包含 在 此 根 元 素 内 。 

使 用 CSS 可 以 控制 XML 文档 的 显示 。CSS 的 display 属性 可 以 使 XML 元 素 以 特定 的 
(CX)HTML 元 素 显 示 方式 显示 ， 比 如 块 级 元 素 、 内 联 元 素 、 表 格 、 列 表 等 。 

CSS 的 浮动 和 定位 同样 可 以 用 于 布局 XML 文档 ， 与 应 用 于 (X)HTML 文档 中 没有 两 样 。 

尽管 CSS 可 以 用 来 给 XML 文档 添加 样式 ， 但 其 效果 与 (X)HTML 存在 一 定 的 差距 。 各 个 
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浏览 器 对 XML 文档 的 显示 存在 差异 ， 且 这 种 差异 没有 简单 易 行 的 办 法 来 解决 。 因 此 大 部 分 网 
站 是 不 会 使 用 XML 加 CSS 进行 构建 的 。 使 用 XSLT( 可 扩展 样式 表 语 言 转换 ) 可 以 将 XML 文档 
转换 为 XHTML 文档 ， 再 使 用 CSS 添加 样式 ， 可 达到 较 好 的 效果 。 

CSS 能 够 单独 控制 Web 页 面 在 打印 机 上 的 输出 样式 , 可 通过 style 元 素 的 media 属性 、CSS 
的 @media 规则 和 @import 规则 的 媒介 限制 来 实现 。 

由 打印 机 输出 的 多 个 页 面 是 分 离 的 ， 而 显示 器 不 存在 这 样 的 问题 。 针对 具有 分 页 效果 的 媒 
fr. CSS 提供 了 控制 分 页 的 三 个 属性 : page-break-before、page-break-after 和 page-break-inside, 
分 别 设置 元 素 前 、 后 和 中 间 的 分 页 方式 。 

鼠标 指针 、 系 统 颜色 、 系 统 字体 和 轮廓 线 属 于 用 户 界 面相 关 元 素 ，CSS 提供 了 相应 的 样式 
属性 ， 用 来 控制 这 些 元 素 的 样式 。 

鼠标 指针 可 以 提示 用 户 正在 或 即将 进行 的 操作 的 类 型 ，cursor 属性 可 以 更 改元 素 的 鼠标 指 
针 样 式 ， 除 了 使 用 CSS 提供 的 关键 字 外 ， 还 可 以 使 用 自 定义 的 鼠标 指针 。Firefox 浏览 器 可 以 
使 用 PNG. GIF 和 JPG 格式 的 图 像 ， 而 正 只 能 使 用 后 级 为 cur 的 鼠标 指针 文件 。Mozilla 扩展 
提供 了 额外 的 鼠标 指针 样式 ， 它 们 可 用 于 Firefox 浏览 器 中 。 

如 果 设 计 者 希望 页 面 效 果 和 用 户 的 系统 保持 一 致 ， 那 么 CSS 提供 的 系统 颜色 关键 字 可 达 
到 这 个 目的 ， 每 个 系统 颜色 关键 字 对 应 着 系统 中 某 对 象 的 颜色 值 。 

轮廓 线 可 以 给 元 素 添加 一 层 线 框 ， 通 常用 在 需要 突出 显示 的 元 素 上 ，CSS 的 outline 属性 
可 以 修改 轮廓 线 样式 ， 与 边框 不 同 的 是 ， 轮廓 线 不 占用 任何 空间 ， 且 四 个 方向 的 轮廓 线 样式 是 

- 致 的 ， 不 可 单独 进行 调整 。 

IE 浏览 器 支持 滤 镜 和 转 场 ,多 个 滤 镜 可 以 同时 使 用 , 使 用 滤 镜 可 以 解决 IE6 无 法 正常 显示 
透明 PNG 图 像 的 问题 。 转 场 一 般 结合 JavaScript 之 类 的 脚本 语言 实现 动态 变化 效果 。 

通过 behavior 属性 ，IE 可 将 DHTML 的 行为 引入 到 页 面 中 。IE 支持 在 CSS 属性 值 中 使 用 
JavaScript 代码 ， 即 CSS 表达 式 。 它 可 以 动态 地 设 定 元 素 样式 。 但 同时 表达 式 也 带 来 很 严重 的 
性 能 问题 。 

微软 对 CSS 进行 了 扩展 ， 其 中 包含 了 控制 滚动 条 外 观 、 缩 放 元 素 等 功能 的 属性 。 

Mozilla 扩展 是 针对 Firefox 浏览 器 的 ， 扩 展 提 供 了 新 的 属性 、 属 性 值 、 颜 色 函 数 等 。 目 前 
Mozilla 扩展 中 的 一 部 分 属性 已 经 被 提交 至 W3C， 作 为 CSS3 的 标准 属性 。 

下 一 章 将 进入 本 书 的 最 后 一 部 分 内 容 一 一 CSS 实战 , 将 带领 读者 逐步 完成 一 个 比较 完整 的 
页 面 实例 。 


第 六 篇 “CSS 实战 


第 18 €: MyBlog 实例 


本 章 将 通过 一 个 简单 但 较为 完整 的 网 站 实例 来 介绍 如 何 使 用 简洁 的 XHTML 构建 页 面 内 
容 ， 并 将 所 学 的 各 种 CSS 样式 运用 到 网 站 设计 中 。 


18.1 实例 说 明 


本 实例 将 带领 读者 完成 一 个 常见 的 博客 网 站 页 面 的 制作 ， 效 果 如 图 18-1 所 示 。 


18-1 MyBlog 的 最 终 效果 
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这 是 一 个 假想 的 个 人 博客 网 站 ， 叫 做 MyBlog。 页 面 以 绿色 调 为 主 ， 白 色调 为 辅 。 首 页 包 
含 了 标题 、 导 航 、 侧 栏 、 文 章 等 内 容 。 


18.2 ”从 布局 开始 


18.2.1 结构 分 析 


从 图 18-1 中 可 以 看 出 ， 在 页 面 上 部 有 标题 和 导航 ， 中 间 部 分 的 左 侧 显示 了 若干 次 要 的 栏 
目 ， 右 侧 则 显示 部 分 文章 内 容 ， 页 面 最 低 端 为 底 脚 区 域 ， 显 示 一 些 版 权 信息 。 很 明显 ， 可 以 用 
三 行 两 列 的 布局 方式 来 安排 页 面 内 容 ( 见 图 18-2)。 


外 容器 
顶端 
中 间 容 器 


主要 内 容 


EE NEN 


图 18-2 页 面 布局 安排 
竖 直 方向 由 上 至 下 设置 三 个 div 元 素 ， 分 别 作 为 项 端 、 左 栏 和 主要 内 容 以 及 底 脚 的 容器 ， 
然后 在 中 间 的 div 元 素 中 设置 两 个 div 元 素 ， 分 别 作为 左 栏 和 右 侧 的 主要 内 容 。 因 为 页 面 是 水 
平 居中 对 齐 的 ， 所 以 全 部 区 域 都 放 在 一 个 外 容器 中 ， 以 便 控制 其 对 齐 方 式 。 
在 分 析 完 页 面 基本 布局 形式 后 ,根据 效果 图 ， 可 初步 确定 各 个 区 域 所 占 空间 的 大 小 以 及 它 
们 之 间 的 距离 ， 图 18-3 中 标注 了 各 区 域 的 宽度 值 和 它们 的 间距 大 小 。 


760px 
底 脚 


图 18-3 确定 区 域 宽度 及 间距 


18.2.2 准备 XHTML 代码 


对 布局 进行 分 析 后 ， 就 可 以 向 文档 中 添加 相应 的 div 元 素 ， 作 为 每 个 区 域 的 容器 。 
新 建 一 个 html 文档 ， 在 body 元 素 中 输入 以 下 代码 ， 并 保存 为 ndex.html: 


«div id-"wrapper"» 
«div id-"header"»«/div» 
«div id-"middle"» 
«div id-"sidebar"»«/div» 
<div id-"content"»«/div» 
</div> 
<div id="footer"></div> 
</div> 


各 个 区 域 的 id 命名 如 代码 所 示 。 


> 


18.3 准备 样式 表 


将 不 同 用 途 的 CSS 代码 放 在 不 同 的 样式 表 文 件 中 有 助 于 代码 的 管理 和 维护 ， 对 于 本 实例 ， 
我 们 将 准备 如 下 几 个 CSS 文件 。 

*  globalcss: 全 局 样式 ， 用 于 整个 站 点 的 基本 样式 。 

© index.css: 首页 样式 。 

€  linkscss: 链接 样式 ， 应 用 于 整个 站 点 中 出 现 的 链接 。 

@  iehackcss: IE 专用 样式 ， 用 于 处 理 浏览 器 显示 差异 以 及 兼容 性 问题 。 

将 以 上 CSS 样式 文件 单独 存放 于 一 个 目录 下 ， 取 名 为 css。 另外， 将 页 面 所 需 的 图 片 放置 
TE images 目录 下 。 

在 index.html 中 的 head 元 素 内 添加 4 个 link 元 素 , 将 样式 表 文件 引入 到 页 面 中 。 注意 针对 
IE 的 样式 iehack.css 要 写 在 条 件 注释 中 : 

<link rel="stylesheet" type="text/css" href="css/global.css" /> 

<link rel="stylesheet" type="text/css" href="css/index.css" /> 

<link rel="stylesheet" type="text/css" href="css/link.css" /> 

SI —HHEECIEDIS 

<link rel="stylesheet" type="text/css" href-"css/iehack.css" /> 

«! [endif]--» 


在 全 局 样式 表 中 ， 一 部 分 代码 用 来 取消 元 素 在 浏览 器 中 的 默认 样式 ， 另 一 部 分 用 来 给 整个 
网 站 添加 公共 的 样式 。 代 码 如 下 : 
eu 
margin:0; 
padding:0; 


eM 
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bodyt 
font-size:l4px; 
font-family:Times New Roman, "R$", sans-serif; 
background: $909090; 
) 
ul li( 
list-style:none; 
} 
a img{ 
border:none; 
} 
代码 首先 利用 通用 选择 符 将 所 有 元 素 的 边 距 和 填充 设 为 0， 然 后 定义 body 元 素 的 字体 大 
小 、 字 体 族 和 背景 色 。 最 后 取消 下 元 素 默认 的 列表 样式 以 及 链接 中 图 像 所 带 有 的 边框 。 
页 面 尺寸 大 小 已 经 确定 ， 因 此 在 index.ess 中 添加 如 下 代码 : 
div#wrapper{ 
width:780px; 
margin:0 auto; 
background: #FFF; 
} 


#wrapper 宽度 为 780px， 背 景色 为 白色 ，margin 属性 的 作用 是 使 元 素 水 平 居中 对 齐 。 
在 link.css 中 添加 a 元 素 的 全 局 样式 : 


at 
color:£$26670D; 
text-decoration:none; 
) 
a:hover( 


text-decoration:underline; 


} 
() 延伸 :著名 的 CSS 专家 Eric Meyer 编写 了 一 个 样式 文件 ， 重 置 了 浏览 器 为 元 素 增加 的 
所 有 默认 样式 ， 读 者 可 以 访问 http://meyerweb.com/eric/tools/css/reset/， 查 看 并 下 


载 这 个 文件 。 另 外 ，Yahool User Interface Library (YUD 也 提供 了 类 似 作用 的 样式 
表 ， 读 者 可 以 访问 http://developer.yahoo.com/yui/ 以 获得 更 多 详细 的 信息 。 


18.4 添加 标题 和 导航 


18.4.1 准备 XHTML 代码 


页 面 的 顶部 包含 标题 和 导航 两 部 分 ,为 此 我 们 在 各 eader 中 添加 一 个 hl 元 素 和 一 个 由 元 素 ， 
也 中 包含 若干 元素， 在 中 放置 链接 : 


«div id-"header"» 
<hl>My Blog</h1> 
<ul id-"navi"» 
<li id-"home"»«a href=""> 博 客 首页 </a></1i> 
«li id="article"><a href=""> 我 的 日 志 </a></1i> 
«li id="photo"><a href=""> 我 的 相册 </a></1i> 
«li id="message"><a href=""> 给 我 留言 </a></1i> 
</ul> 
</div> 


可 以 注意 到 ， 标 题 和 导航 部 分 内 容 直 接 使 用 XHTML 中 相应 的 元 素 ， 我 们 没有 再 为 它们 额 
外 添加 容器 (比如 div)。 除 非 页 面 效 果 需 要 这 样 的 元 素 存在 ， 和 否则 这 样 做 是 画蛇添足 ， 既 破坏 了 
代码 的 简洁 性 ， 又 会 影响 页 面 的 加 载 速度 。 


18.4.2 ”标题 样式 


18-4 ”项 部 区 域 的 背景 图 


然后 对 #header 添加 如 下 样式 : 
div#header{ 
width:760px; 
background:url(../images/header bg.jpg); 
height:150px; 
margin:0 auto; 
) 
页 面 顶 端 区 域 的 高 度 是 根据 图 片 而 定 的 ， 因 此 可 设 为 固定 值 150px。 由 于 图 片 和 样式 文件 
单独 放 在 各 自 的 目录 中 , 因此 要 注意 background 属性 引用 图 像 文件 的 路 径 是 否 正确 。 预览 效果 
如 图 18-5 所 示 。 


图 18-5 预览 效果 
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接着 对 区 域 中 的 标题 添加 样式 : 


div#header hl{ 
color:#000; 
background:#FFF; 


padding:3px 5px; 
margin:30px 0 0 40px; 
font-size:20px; 
float:left; 
border:lpx solid #777; 
width:300px; 
display:inline; 
) 
hl 元 素 没 有 id 属性 ， 可 通过 后 代 选 择 符 对 其 添加 样式 。 以 上 代码 设置 了 hl 元 素 的 文字 颜 
色 和 大 小 、 背 景色 以 及 盒 模型 相关 的 属性 。 从 图 18-1 的 效果 看 ， 标 题 有 一 定 的 透明 度 ， 于 是 再 
添加 三 条 声明 : 
opacity:0.7; /* for Firefox that support CSS3 */ 
-moz-opacity:0.7;  /* for Firefox */ 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity-"70"); /* for IE */ 
opacity 属性 属于 CSS3 的 标准 ， 目 前 新 版 的 Firefox 浏览 器 已 经 支持 这 个 属性 ， 对 于 不 支 
持 该 属性 的 Firefox 可 使 用 Mozilla 扩展 提供 的 -moz-opacity 属性 ， 对 于 IE 浏览 器 可 使 用 滤 镜 。 
图 18-6 展示 了 当前 效果 。 
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184.3 ”导航 设计 


导航 使 用 列表 元 素 实现 ， 首 先 定义 ul 元 素 的 样式 ，CSS 代码 如 下 : 


div#header ul( 
float:right; 
width:320px; 
margin:100px 0 0 0; 
color:#FFF; 

} 


导航 菜单 是 靠 右 对 齐 的 ， 因 此 将 它 向 右 浮动 。 接 着 定义 所 有 上 元 素 的 样式 ， 代 码 如 下 : 
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div#header ul li( 
float:left; 
padding:3px 5px 3px l6px; 
margin-left:6px; 
background-position:left 5px; 
background-repeat:no-repeat; 


d 
float:left 声明 将 li 元 素 排列 成 一 行 ，background-position 和 background-repeat 属性 定义 了 
背景 图 像 的 位 置 和 重复 方式 ， 下 面 通 过 id 选择 符 添加 导航 菜单 中 每 项 之 前 的 图 标 ， 代 码 如 下 : 


lifhome( 
background:url(../images/navi home.gif); 


a 


} 
li#article{ 

background:url(../images/navi article.gif); 
) 
li#photo{ 

background:url(../images/navi photo.gif); 
) 
li£message( 

background:url(../images/navi message.gif); 
) 
最 后 在 link.css 中 添加 a 元 素 的 样式 ， 代 码 如 下 : 
#header li a{ 

color:£FFF; 


text-decoration:none; 
} 
#header li a:hover( 
color:£F6F797; 
) 


现在 ， 在 不 同 的 浏览 器 中 观察 一 下 导航 效果 ( 见 图 18-7)» 
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图 18-7 1IE( 上 ) 和 Firefox( 下 ) 的 显示 效果 
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仔细 观察 会 发 现 ， 导 航 在 黑色 区 域 中 的 位 置 不 一 致 ， 正 要 比 Firefox 中 的 位 置 稍稍 偏 上 一 
些 ， 产 生 此 问题 的 原因 在 于 ，IE 和 Firefox 对 padding 属性 的 处 理 方式 存在 差异 ， 导 致 相同 的 
填充 和 边 距 值 产生 不 一 致 的 效果 。 对 此 ， 我 们 在 iehack.css 中 修改 元 素 的 padding 属性 ， 使 
IE 和 Firefox 应 用 不 同 的 padding 值 ， 代 码 如 下 : 


div#header ul li( 
padding-top:5px; 


H 
如 图 18-8 所 示 为 TE 浏览 器 中 的 效果 。 


18-8 ”标题 和 导航 的 最 终 效果 


18.5 左 栏 内 容 设 计 


18.5.1 处 理 #middle 


#middle 是 中 间 区 域 的 容器 ， 里 面包 含 左 栏 和 右 侧 的 文章 显示 ， 在 处 理 左 栏 之 前 先 要 为 它 
添加 样式 ， 代 码 如 下 : 


div#middle{ 
margin:l0px 0 0 0; 
padding:0 10px; 

} 


#middle 距离 #header 有 10px 间距 ， 且 左右 各 有 10px 的 填充 。 


18.5.0 ”处 理 左 栏 


左 栏 位 于 页 面 的 中 间 靠 左 部 分 , 里 面包 含 三 个 栏目 ,首先 添加 三 个 栏目 所 需 的 XHTML 代 
码 ， 在 #sidebar 中 添加 如 下 代码 : 


<div id-"pinfo" class="sideBox"> 
<h3> 个 人 信息 </h3> 
<a href="#"><img src-"images/head.gif" alt=" 头 像 ” /></a> 
«div class="item"> 注 册 时 间 : 2007-01-11«/div» 
«div class="item"> 最 近 更 新 : 2008-03-12«/div» 
«div class="item"> 最 近 登 录 : 2008-03-13«/div» 
</div> 


<div id-"recentMsg" class-"sideBox"» 

<h3> 最 新 留言 </h3> 

<div class="item"> 
<span> 网 友 </span><br /> 
«a href=""> 随 便 看 看 ~</a> 

</div> 

<div class="item"> 
<span>Lynda</span><br /> 
<a href=""> 看 到 你 去 巴黎 的 照片 了 。</a> 


</div> 


«div id-"viewMsg" class-"item"» 
«a href=""> 查 看 全 部 留言 &gt; &gt;</a> 
</div> 
</div> 
<div id="stat" class="sideBox"> 
<h3> 访 问 统计 </h3> 
<div class="item"> 近 日 访问 : 1285 人 </div> 
«div class="item"> 总 访问 量 : 29834 人 </div> 
</div> 


每 个 栏目 都 有 个 div 元 素 作为 容器 ， 通 过 id 对 不 同 栏目 进行 标识 ， 它 们 的 class 属性 均 为 


sideBox. 


18.5.3 添加 样式 


首先 对 #sidebar 添加 样式 ， 代 码 如 下 : 


div#sidebar{ 

float:left; 

width:230px; 

display:inline; /* fix IE double-margin bug */ 
H 


通过 class 选择 符 给 栏目 容器 添加 样式 ， 代 码 如 下 : 


div.sideBox( 

margin:0 0 10px 0; 

padding:0 0 8px 0; 

background:url(../images/line.gif) left bottom repeat-x; 
5 


每 个 栏目 的 容器 底 端 被 放置 了 背景 图 (line.gif， 见 图 18-9)， 作 为 栏目 之 间 的 分 隔 线 。 
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图 18-9 line.gif 作为 栏目 之 间 的 分 隔 线 
下 面 添加 栏目 标题 的 样式 ， 代 码 如 下 : 


div.sideBox h3( 

color:#FFF; 

font-size:12px; 

padding:8px 0 4px 20px; 

margin-bottom: 10px; 

width:210px; 

background:url(../images/sidebox header.jpg) left top no-repeat; 
} 


由 于 正和 Firefox X} padding 解析 的 不 同 ， 将 以 下 代码 添加 到 iehack.css 中 : 


div.sideBox h3( 
padding-top:10px; 
} 


图 18-10 展示 了 当前 页 面 的 效果 。 
TAG bil, CSA 


ax 

MESS- 

Lynda 
FIPEERMEKT. 
"i 

好 入 没有 更 新 了 吧 。 
网 友 

EL 

ME 


生日 快乐 啊 。 
查看 全 部 留言 > 


Ti T 
近日 访问 : 1285 人 
BUHR 29834 人 


E 18-10 ” 侧 栏 的 初步 效果 
添加 如 下 代码 来 控制 个 人 信息 中 的 头像 图 片 : 


div#pinfo a img( 
margin:lOpx 0 5px 20px; 
padding:3px; 
border:lpx solid #909090; 
} 


每 个 栏目 中 的 信息 都 被 包含 在 class 属性 为 item 的 div 元 素 中 ， 给 该 元 素 添 加 如 下 样式 : 


div.item( 
margin:5px l0px 0 20px; 
) 


最 新 留言 栏目 中 的 条 目 要 进行 一 些 特殊 处 理 ， 修 改行 间距 、 增 加 分 隔 线 ， 代 码 如 下 : 


div#recentMsg div.item( 
line-height:1.5em; 
margin-left:15px; 
padding-left:5px; 
border-bottom:lpx solid $78AD27; 

} 

div#recentMsg div#viewMsg{ 
border:none; 


) 
现在 预览 一 下 左 栏 的 效果 ( 见 图 18-11). 
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18.6 文章 显示 


18.6.1 处 理 #content 


#content 是 页 面 中间 右 侧 区 域 的 容器 ， 首 先 给 #content 添加 样式 ， 设 置 整 个 区 域 : 
div#content{ 

float:left; 

margin-left:20px; 

width:510px; 


) 


ficontent 向 左 浮动 ， 与 #sidebar 之 间 有 20px 的 距离 ， 宽 度 为 510px， 与 如 图 18-3 所 示 的 宽 
度 大 小 相 一 致 。 
由 于 #middle 中 的 两 个 子 元 素 #sidebar 和 #content 全 部 采用 浮动 布局 ， 因 此 它 的 高 度 将 不 会 
随 着 这 两 个 元 素 进 行 变化 ， 所 以 我 们 要 在 #content 之 后 添加 一 个 div 元 素 ， 用 来 清除 浮动 : 
«div id-"middle"» 
«div id-"sidebar"» 


«/div» 

«div id-"content"»«/div» 

«div class-"clearFloat"»«/div» 
«/div» 


相应 地 ， 在 global.css 中 添加 如 下 代码 : 


.ClearFloat{ 
clear:both; 


} 


18.6.2 ”准备 代码 


在 #content 中 添加 如 下 XHTML 代码 : 


«div class-"contentBox"» 
<h2> 到 家 了 </h2> 
<p> 昨 晚 刚 从 成 都 回 到 北京 ， 回 家 倒 头 便 睡 ， 一 觉醒 来 已 经 临近 中 午 了 。 随 便 吃 了 些 东 西 就 习惯 性 
地 坐 在 了 电脑 前 面 。</p> 
<p> 出 去 了 这 么 久 ， 很 长 时 间 没 来 更 新 了 ， 先 发 些 照片 吧 。 
<span class="imgBox"> 
«img src="images/citynight .jpg”alt=" 城 市 夜景 " /> 
</span> 
<span class="imgBox"> 
<img src-"images/moutain.jpg" alt-"ili" /> 


</span> 

</p> 

«a href-"" class="floatRight"> 阅 读 全 文 &gt;&gt;«/a» 

«div class="artInfo">2008-03-12 | 评论 (3) | 阅读 (215)</div> 

<div class="clearFloat"></div> 
</div> 
«div class-"contentBox"» 

<h2> 无 题 </h2> 

<p> 感 觉 最 近 总 想 写 些 什么 ， 脑 子 里 充满 了 各 种 奇特 的 想法 。 但 是 一 坐 到 电脑 前 面 ， 双 手 放 在 键盘 
上 时 ， 那 些 奇 思 妙 想 突 然 就 消失 的 无 影 无 踪 了 ， 结 果 竟 然 一 个 字 都 没有 写 。 什 么 时 候 能 发 明 一 种 机 器 ， 
能 直接 将 想法 转 成 文字 ， 不 用 费劲 敲 键盘 该 多 好 。</p> 

«a href-"" class="floatRight"> 阅 读 全 文 &gt; &gt;</a> 

«div class="artInfo">2007-12-17 | 评论 (12) | 阅读 (1376)</div> 

<div class-"clearFloat"»«/div» 
«/div» 


class 属性 为 contentBox 的 div 元 素 作 为 每 篇 文章 的 容器 ， 其 中 h2 包含 文章 标题 ，p 元 素 
包含 文章 内 容 ， 最 后 的 a 元 素 和 div 元 素 用 来 放置 其 他 信息 。 


18.6.3 添加 样式 


首先 对 文章 的 容器 添加 样式 ， 代 码 如 下 : 
div.contentBox( 
margin:0px 10px 20px 0; 
background:url(../images/line.gif) left bottom repeat-x; 
) 


文章 之 间 用 虚线 进行 分 隔 ， 在 区 域 底部 添加 水 平方 向 重复 出 现 的 分 隔 线 。 
接着 给 文章 标题 、 文 章 段落 以 及 段落 中 的 图 片 容器 添加 样式 ， 代 码 如 下 : 


div.contentBox h2( 
color:$2E6722; 
font-size:l4px; 
padding:6px 0 0 10px; 
margin:0 0 20px 0; 


div.contentBox p{ 
font-size:l4px; 
text-indent:2.2em; 
letter-spacing:0.1lem; 
line-height:1.3em; 
color:£333333; 
margin:20px 0; 


div.contentBox span.imgBox( 
display:block; 
text-indent:0; 
margin:20px 0; 
text-align:center; 
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段落 中 文字 的 行 间距 为 1.3em， 字 符 之 间 的 距离 为 0.lem， 这 样 可 防止 文字 过 于 密集 ， 另 
外 适当 增加 字符 间距 也 能 提高 文字 的 可 阅读 性 。 由 于 每 个 字符 之 间 多 增加 了 0.1em 的 距离 ， 因 
此 段落 首 行 缩 进 为 2.2em。.imgBox 中 声明 “display:block;” 使 span 元 素 以 块 级 元 素 方式 显示 ， 
声明 “text-indent:0;” 取 消 其 继承 的 缩 进 值 ， 声 明 “text-align:center;” 使 图 片 水 平 居中 对 齐 。 


[À 提示 : ”由 于 pp 元 素 中 不 能 再 包含 其 他 块 级 元 素 ， 所 以 这 里 使 用 span 元 素 作为 img 的 容 
器 . 另外 , 如果 不 给 img 元 素 添加 容器 , 使 用 如 下 方法 也 能 实现 图 像 的 水 平 居中 : 
给 img 元 素 添加 声明 “margin:20px auto;”， 利 用 边 距 的 auto 值 来 实现 水 平 居中 ， 
但 前 提 是 img 的 父 元 素 需 要 有 确定 的 宽度 值 。 
如 图 18-12 所 示 为 页 面 的 效果 。 
到 家 了 


昨 晚 刚 从 成 都 回 到 北京 ， 回 家 例 头 便 睡 ， 一 觉醒 来 已 经 临近 中 午 了 ， 随 
便 吃 了 些 东 西 就 习惯 性 地 坐 在 了 电脑 前 面 . 


出 去 了 这 么 久 ， 很 长 时 间 没 来 更 新 了 ， 先 发 些 照片 吧 . 


Miter >> 
2008-03-12 1 FEG) | 阅读 C19) 


X 


感觉 最 近 总 想 写 些 什么 ， 脑 子 里 充满 了 各 种 奇特 的 想法 。 但 是 一 坐 到 电 
脑 前 面 放 在 键盘 上 时 ， 那 些 奇 思 妙 想 突然 就 消失 的 无 影 无 踪 了 ， 结 果 
竟然 一 个 没有 写 。 什 么 时 候 能 发 明 一 种 机 器 ， 能 直接 将 想法 转 成 文字 ， 
不 用 费劲 项 键盘 该 多 好 


Riter >> 
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图 18-12 文章 显示 的 效果 


最 后 给 文章 的 附加 信息 添加 样式 ， 使 其 向 右 对 齐 : 


div.artInfo( 
float:right; 
width:200px; 
} 


元 素 的 浮动 导致 它 将 脱离 父 元 素 的 包围 ， 这 时 效果 会 如 图 18-13 所 示 。 
[ --— o AE 


mter >> 
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X5 
感觉 最 近 总 想 写 些 什么 ， 脑 子 里 充 薄 了 各 种 奇特 的 想法 。 但 是 一 坐 到 电 
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图 18-13 文章 时 间 等 信息 位 于 分 隔 线 之 下 
在 该 元 素 后 添加 清除 浮动 的 div 元 素 ， 使 该 元 素 能 位 于 分 隔 线 之 内 : 


<div class="contentBox"> 
<h2> 到 家 了 </h2> 


<div class="artInfo">2008-03-12 | 评论 (3) | 阅读 (215)</div> 
<div class="clearFloat"></div> 

</div> 

<div class="contentBox"> 


«div class="artInfo">2007-12-17 | 评论 (12) | 阅读 (1376)</div> 
<div class-"clearFloat"»«/div» 
«/div» 


如 图 18-14 所 示 为 Firefox 中 显示 的 效果 ， 文 章 日 期 等 信息 已 经 位 于 分 隔 线 之 内 了 。 
Be 


miter 
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感 沉 最 近 总 想 写 些 什么 ， 议 子 里 充满 了 各 种 奇特 的 想法 。 但 是 一 坐 到 
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18-14 ”修改 后 的 页 面 效果 (Firefox 浏览 器 ) 


如 果 读 者 使 用 TE 浏览 器 观察 效果 ， 会 发 现 一 个 奇怪 的 问题 ， 下 一 篇 文章 的 标题 也 跑 到 分 
隔 线 之 上 了 ( 见 图 18-15). 
BR 
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无 是 


感 常 黑 诉 闪 相 写 此 什么 脑子 甲 刘 湛 了 冬 禹 亩 转 的 相 汀 ”但 早 一 坐 到 由 


18-15 IE 浏览 器 的 问题 (下 一 篇 文章 的 标题 位 于 分 隔 线 之 上 ) 


w 
M 
~ 


g 


c 


amer numum 


这 又 是 正 浏览 器 中 的 浮动 问题 ， 它 是 由 浮动 属性 和 背景 属性 共同 产 4 
加 如 下 样式 规则 可 解决 这 个 问题 : 


div.contentBox( 
height:15; 


} 
最 后 在 给 .artInfo 增加 一 些 下 边 距 : 


div.artInfo( 
float:right; 
width:200px; 
margin-bottom:lOpx; 
} 


现在 页 面 效果 如 图 18-16 所 示 。 


到 家 了 


昨 晚 刚 从 成 都 回 到 北京 ， 回 家 创 头 便 瞪 ， 一 觉醒 厅 已 经 临近 中 午 了 . 随 
便 吃 了 些 东 西 就 习惯 性 地 坐 在 了 电脑 前 面 。 


出 去 了 这 么 久 ， 很 长 时 间 没 来 更 新 了 ， 先 发 些 照 片 吧 . 


Hk > 


Xm 


近 总 2 特 的 想法 。 但 是 一 坐 到 电 
XCFHCEBES DHT. 妙 起 的 无 时 T, SR 
字 都 没有 写 。 什 么 时 候 能 发明 一 种 机 器 ， 能 直接 衔 想 法 转 成 文字 ， 
不 用 匣 劲 融 键 盘 该 多 好 。 


[ > 
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图 18-16 文章 显示 区 域 的 最 终 效果 


上 的。 在 iehack.css is 


197 留言 表单 


i 


18.7.1 XHTML 代码 
文章 显示 区 域 的 下 方 提供 了 一 个 留言 表单 ， 表 单 的 XHTML 代码 如 下 : 


18.7.2 添加 样式 
留言 的 标题 应 该 和 上 面 的 文章 标题 有 所 区 别 ， 于 是 添加 如 下 样式 : 


i 
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id 选择 符 比 前 面 的 属性 选择 符 (注意 class 选择 符 属于 属性 选择 符 ) 的 确定 度 高 , 因此 留言 区 


域 的 标题 将 应 用 这 个 样式 。 
对 布局 表单 元 素 的 table 添加 如 下 样式 : 
table#newMsg{ 


margin-bottom:20px; 

) 

table#newMsg td( 
padding:2px 0; 

} 

col#tblHeader{ 
width:80px; 

) 


表单 元 素 的 样式 如 下 : 


input, textarea( 
font-size:1l2px; 
font-family:Tahoma, "R", serif; 
border:lpx solid #909090; 
color:#454545; 

} 


以 上 代码 可 添加 到 global.css 中 ， 作 为 所 有 表单 元 素 的 全 局 样式 。 其 余 样式 如 下 : 


input#username, input£email( 
width:l60px; 
height:l6px; 
padding:2px; 
background: #EFEFEF; 

) 

textareaimsgContent ( 
width:300px; 
padding:2px; 
background: #EFEFEF; 

} 


图 18-17 展示 了 表单 的 最 终 效 果 。 


电子 信箱 ORA) 


留 言 


18-17 ”留言 表单 的 效果 


18.8 底 脚 处 理 


页 面 底 脚 含有 一 些 版 权 声明 的 文字 ， 其 XHTML 代码 如 下 : 


«div id="footer"> 
<p>Copyright &copy; 2006 - 2008 Hui Studio, All Rights Reserved.</p> 
<p> 小 晖 子 工 作 室 版 权 所 有 </p> 

</div> 


样式 代码 如 下 : 


div#footer{ 
margin:30px 10px 0 10px; 
padding:10px 0; 
border-top:lpx solid #CDCDCD; 
} 
div#footer p{ 
text-align:center; 
margin:8px 0; 


} 
效果 如 图 18-18 所 示 。 


Copyright © 2006 - 2008 Hui Studio, All Rights Reserved. 
MERITER 版 权 所 有 


图 18-18 ” 底 脚 最 终 效果 
至 此 ， 页 面 所 有 内 容 均 已 制作 完成 。 页 面 的 最 终 效果 请 参考 图 18-1(Firefox 浏览 器 )。 


18.9 完整 代码 


本 小 节 将 提供 一 份 本 实例 的 完整 代码 。 


18.9.1 XHTML 文档 代码 


index.html 的 完整 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"» 

<html xmlns-"http://www.w3.org/1999/xhtml"» 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>MyBlog</title> 


— 
| 网 页 布局 开发 指南  , 


<link rel="stylesheet" type="text/css" href-"css/global.css" /> 
<link rel="stylesheet" type="text/css" href="css/index.css" /> 
<link rel="stylesheet" type="text/css" href-"css/link.css" /> 
SUCH a e o 

<link rel="stylesheet" type="text/css" href="css/iehack.css" /> 
<! [endif]--> 


</head> 

<body> 

<div id="wrapper"> 
SUE a 


<div id="header"> 
<hl>My Blog</h1> 
<ul id="navi"> 
<li id="home"><a href=""> 博 客 首页 </a></1i> 
<li id-"article"»«a href=""> 我 的 日 志 </a></1i> 
«li id="photo"><a href=""> 我 的 相册 </a></1i> 
«li id="message"><a href=""> 给 我 留言 </a></1i> 
</ul> 
</div> 
a e e d 
<div id="middle"> 
<div id="sidebar"> 
<div id="pinfo" class="sideBox"> 
<h3> 个 人 信息 </h3> 
«a href="#"><img src-"images/head.gif" alt=" 头 像 " /»«/a» 
<div class="item"> 注 册 时 间 : 2007-01-11</div> 
«div class="item"> 最 近 更 新 : 2008-03-12«/div» 
«div class="item"> 最 近 登 录 : 2008-03-13</div> 
</div> 
<div id="recentMsg" class="sideBox"> 
<h3> 最 新 留言 </h3> 
<div class="item"> 
<span> 网 友 </span><br /> 
<a href=""> 随 便 看 看 ~</a> 
</div> 
<div class="item"> 
<span>Lynda</span><br /> 
«a href=""> 看 到 你 去 巴黎 的 照片 了 。</a> 
«/div» 
«div class-"item"» 
Xspan»Amy«/span»«br /> 
«a href=""> 好 久 没有 更 新 了 吧 。</a> 
«/div» 
<div class-"item"» 
<span> 网 友 </span><br /> 
<a href=""> 不 错 </a> 
</div> 
«div class="item"> 


<span> 小 丸子 </span><br /> 
«a href=""> 生 日 快乐 啊 。</a> 
«/div» 
«div id-"viewMsg" class-"item"» 
«a href=""> 查 看 全 部 留言 &gt; &gt;</a> 
</div> 
</div> 
«div id-"stat" class="sideBox"> 
<h3> 访 问 统计 </h3> 
«div class="item"> 近 日 访问 : 1285 人 </div> 
«div class="item"> 总 访问 量 : 29834 人 </div> 
</div> 
</div> 
<div id="content"> 
«div class="contentBox"> 
<h2> 到 家 了 </h2> 


<p> 昨 晚 刚 从 成 都 回 到 北京 ， 回 家 倒 头 便 睡 ， 一 觉醒 来 已 经 临近 中 午 了 。 随 便 吃 了 些 东 


西 就 习惯 性 地 坐 在 了 电脑 前 面 。</p> 
<p> 出 去 了 这 么 久 ， 很 长 时 间 没 来 更 新 了 ， 先 发 些 照片 吧 。 
<span class="imgBox"> 
«img src="images/citynight.jpg”alt=" 城 市 夜景 "” /> 
</span> 
<span class="imgBox"> 
<img src-"images/moutain.jpg" alt-"ili" /> 
</span> 
</p> 
<a href="" class="floatRight"> 阅 读 全 文 &gt;&gt;«/a» 
«div class-"artInfo"22008-03-12 | 评论 (3) | 阅读 (215)</div> 
«div class-"clearFloat"»«/div» 
«/div» 
«div class-"contentBox"» 
<h2> 无 题 </h2> 


<p> 感 觉 最 近 总 想 写 些 什么 ， 脑 子 里 充满 了 各 种 奇特 的 想法 。 但 是 一 坐 到 电脑 前 面 ， 双 
手 放 在 键盘 上 时 ， 那 些 奇 思 妙 想 突 然 就 消失 的 无 影 无 踪 了 ， 结 果 竟 然 一 个 字 都 没有 
写 。 什 么 时 候 能 发 明 一 种 机 器 ， 能 直接 将 想法 转 成 文字 ， 不 用 费劲 敲 键盘 该 多 好 。 

</p> 

«a href-"" class="floatRight"> 阅 读 全 文 «gt; ggt;</a> 

«div class="artInfo">2007-12-17 | 评论 (12) | 阅读 (1376)</div> 

<div class="clearFloat"></div> 


</div> 
<div id="leaveMsg" class="contentBox"> 


<h2> 留 言 </h2> 
<form action="#" method="post"> 
<table id="newMsg"> 


<col id-"tblHeader" /> 
<col id="tblContent" /> 
«tr» 

<td> 姓 名 </td> 


<td><input type="text" tabindex-"1" id-"username" /></td> 
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</tr> 
<tr> 
<td> 电 子 信箱 </td> 
<td><input type="text" tabindex-"2" id-"email" />( 选 填 ) 
</td> 
</tr> 
<tr> 
<td> 内 容 </td> 
<td> 
<textarea cols-"50" rows-"5" tabindex-"3" id-"msgContent"» 
«/textarea» 
«/td» 
«/tr» 
«tr» 
«td»«/td» 
<td><input type="submit" tabindex-"4" value=" 留 jj" /> 
«/td» 
</tr> 
</table> 
</form> 
</div> 
</div> 
<div class="clearFloat"></div> 
</div> 
< footer —> 
<div id="footer"> 
<p>Copyright &copy; 2006 - 2008 Hui Studio, All Rights Reserved.</p> 
<p> 小 晖 子 工作 室 版 权 所 有 </p> 
</div> 
«/div» 
</body> 
</html> 


18.9.2 样式 表 文 档 代码 


global.css: 


J(ORCIOOOKICOEORKIOORORCIOEOROKOROEORORAOOEORGICEOGIOGORGIOGAOOROR GORGE 


* Created date: | 2008-02-27 
Author: Jia Zheng 
* Project: MyBlog 
* Description: eliminate default styles, 
* global styles and common 
* styles. 
kkkkkkkkkkkkkkkkkkkřkkřkkěkkkkkkkkkkřkřkřkžkžžžkžkkkk*kk/ 
ef 
margin:0; 
padding:0; 
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border:lpx solid #777; 

width:300px; 

display:inline; 

opacity:0.7; /* for Firefox that support CSS3 */ 
-moz-opacity:0.7;  /* for Firefox */ 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity-"70"); /* for IE 


yt 
} 
div#header ul( 
float:right; 
width:320px; 
margin:l100px 0 0 0; 
color:#FFF; 
} 
div#header ul li{ 
float:left; 
padding:3px 5px 3px l6px; 
margin-left:6px; 
background-position:left 5px; 
background-repeat:no-repeat; 
ji 
li#home{ 
background:url(../images/navi home.gif); 
) 
lifarticle( 
background:url(../images/navi article.gif); 
) 
li#photo{ 
background:url(../images/navi photo.gif); 
) 
li#message{ 
background:url(../images/navi message.gif); 
* middle 
eee ke eee 了/ 
divi£middle( 
margin:lOpx 0 0 0; 
padding:0 10px; 
5 
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* sidebar 

kkkkkkkkkkkkkkžk/ 

div#sidebar{ 
float:left; 
width:230px; 
display:inline; 

$ 

div.sideBox{ 
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HTML+CSS 


iehack.css: 
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18.10 水 结 


本 章 通 过 一 个 完整 的 页 面 实例 ， 将 本 书 所 学 的 CSS 知识 融 汇 在 一 起 。 本 实例 除了 涉及 选 
择 符 、 盒 模型 、 控 制 表格 、 表 单 、 列 表 元 素 外 观 、 添 加 背景 图 像 、 页 面 布局 等 CSS 基本 内 容 
外 ， 还 使 用 了 IE 中 的 滤 镜 和 Firefox 支持 的 Mozilla 扩展 ， 最 后 我 们 还 解决 了 一 个 正 浮动 所 带 
来 的 显示 问题 。 

当然 ， 本 实例 所 提供 的 方法 并 不 是 唯一 的 ， 读 者 可 尝试 使 用 其 他 方法 重 做 本 实例 。 

最 后 希望 读者 在 实际 开发 中 能 够 合理 地 运用 XHTML 和 CSS. 用 最 简洁 的 代码 实现 最 理想 
的 效果 。 
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